its
July 22, 2023, 9:47pm
1
I am using the library nextjs-auth0
and am trying to work on reducing the amount of configuration needed without our app. One of the required environment variables for the library is AUTH0_BASE_URL
. I was able to avoid needing to set this by writing custom auth handlers to grab the URL from the request.
import {
handleAuth,
handleCallback,
handleLogin,
handleLogout,
} from "@auth0/nextjs-auth0";
function getBaseUrl(webUrl: string | undefined) {
if (webUrl === undefined)
throw new Error("Error get base Url. Missing request URL.");
const urlObject = new URL(webUrl);
return `${urlObject.protocol}//${urlObject.host}`;
}
process.env.AUTH0_BASE_URL ="http://somethingelse:3000"
export const GET = handleAuth({
// @ts-ignore
callback: (req, res) => {
const baseUrl = getBaseUrl(req.url);
return handleCallback(req, res, {
authorizationParams: {
audience: "https://ourURL.us.auth0.com/api/v2/",
scope: "openid profile email offline_access",
redirect_uri: `${baseUrl}/api/auth/callback`,
},
redirectUri: `${getBaseUrl(req.url)}/api/auth/callback`,
});
},
// @ts-ignore
login: (req, res) => {
const baseUrl = getBaseUrl(req.url);
return handleLogin({
authorizationParams: {
audience: "https://ourURL.us.auth0.com/api/v2/",
scope: "openid profile email offline_access",
redirect_uri: `${baseUrl}/api/auth/callback`,
},
returnTo: baseUrl,
})(req, res);
},
// @ts-ignore
logout: (req, res) => {
return handleLogout({
returnTo: getBaseUrl(req.url),
})(req, res);
},
});
It is also talked about on a few issues within the git project.
opened 04:21PM - 03 Dec 21 UTC
closed 09:45AM - 07 Dec 21 UTC
question
### Description
I have a next.js app that services many organizations via wil… dcard domains like https://my-org.my-site.com, https://my-other-org.my-site.com. Using examples I found here in resolved GitHub issues, I was able to get the redirectUri working as expected. However, now I randomly run into issues with users getting a `checks.state argument is missing` error when they attempt to log in. According to [this thread](https://community.auth0.com/t/badrequesterror-checks-state-argument-is-missing/42609), the solution is to set AUTH0_BASE_URL to match the domain serving the app. Problem is I can't do that because the domain could be any of https://*.my-site.com.
### Reproduction
Custom `[...auth0].tsx` route
```typescript
import {
handleAuth,
handleCallback,
handleLogin,
handleLogout,
} from "@auth0/nextjs-auth0";
import type { NextApiRequest, NextApiResponse } from "next";
function getUrls(req: NextApiRequest): {
redirectUri: string;
returnTo: string;
} {
const protocol = process.env.NODE_ENV === "development" ? "http" : "https";
const host = req.headers.host;
return {
redirectUri: `${protocol}://${host}/api/auth/callback`,
returnTo: `${protocol}://${host}`,
};
}
export default handleAuth({
async callback(req: NextApiRequest, res: NextApiResponse) {
try {
const { redirectUri } = getUrls(req);
await handleCallback(req, res, { redirectUri: redirectUri });
} catch (error) {
res.status(error.status || 500).end(error.message);
}
},
async login(req: NextApiRequest, res: NextApiResponse) {
try {
const { redirectUri, returnTo } = getUrls(req);
await handleLogin(req, res, {
authorizationParams: {
redirect_uri: redirectUri,
},
returnTo: returnTo,
});
} catch (error) {
res.status(error.status || 400).end(error.message);
}
},
async logout(req: NextApiRequest, res: NextApiResponse) {
const { returnTo } = getUrls(req);
await handleLogout(req, res, {
returnTo: returnTo,
});
},
});
```
### Environment
- Next.js 11.1.2
- @auth0/nextjs-auth0 1.6.1
Am I missing something important when it comes to security? Why wouldn’t this be the default way the library works? Is there some reason it would be bad to implement the library this way?
1 Like
tyf
August 2, 2023, 9:19pm
3
Hey there @its welcome to the community!
Sorry for the delayed response - I was just reading through the github repo issues and saw that we were able to get back to you there. Sharing here for future reference:
opened 06:42PM - 29 Jul 23 UTC
closed 09:15AM - 31 Jul 23 UTC
### Checklist
- [X] I have looked into the [Readme](https://github.com/auth0/ne… xtjs-auth0#readme), [Examples](https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md), and [FAQ](https://github.com/auth0/nextjs-auth0/blob/main/FAQ.md) and have not found a suitable solution or answer.
- [X] I have looked into the [API documentation](https://auth0.github.io/nextjs-auth0/) and have not found a suitable solution or answer.
- [X] I have searched the [issues](https://github.com/auth0/nextjs-auth0/issues) and have not found a suitable solution or answer.
- [X] I have searched the [Auth0 Community](https://community.auth0.com) forums and have not found a suitable solution or answer.
- [X] I agree to the terms within the [Auth0 Code of Conduct](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md).
### Describe the problem you'd like to have solved
Requiring setting the `AUTH0_BASE_URL` complicates deployment. As far as I can tell it seems unnecessary.
### Describe the ideal solution
Instead of having the `AUTH0_BASE_URL` be a required environment variable, it could be optional. In cases where it's not supplied, the login behavior will log back wherever the initial request came from.
### Alternatives and current workarounds
```ts
import {
handleAuth,
handleCallback,
handleLogin,
handleLogout,
} from "@auth0/nextjs-auth0";
function getRedirectUrls(webUrl: string | undefined) {
if (webUrl === undefined)
throw new Error("Error get base Url. Missing request URL.");
const urlObject = new URL(webUrl);
const returnTo = `${urlObject.protocol}//${urlObject.host}`;
return {
returnTo,
redirect_uri: `${returnTo}/api/auth/callback`,
};
}
export const GET = handleAuth({
// @ts-ignore
callback: (req, res) => {
const { redirect_uri } = getRedirectUrls(req.url);
return handleCallback(req, res, {
authorizationParams: {
audience: "https://my-audience.us.auth0.com/api/v2/",
scope: "openid profile email offline_access",
redirect_uri: redirect_uri,
},
redirectUri: redirect_uri,
});
},
// @ts-ignore
login: (req, res) => {
const { returnTo, redirect_uri } = getRedirectUrls(req.url);
return handleLogin({
authorizationParams: {
audience: "https://my-audience.us.auth0.com/api/v2/",
scope: "openid profile email offline_access",
redirect_uri,
},
returnTo,
})(req, res);
},
// @ts-ignore
logout: (req, res) => {
return handleLogout({
returnTo: getRedirectUrls(req.url).returnTo,
})(req, res);
},
});
```
### Additional context
Here are some other links that I think are relevant.
https://github.com/auth0/nextjs-auth0/pull/298 This makes it seem like it's an OK solution for this to be dynamic
It's even suggested here: https://community.auth0.com/t/configure-multiple-domains-with-nextjs/107002
Overriding during runtime seems ok https://github.com/auth0/nextjs-auth0/issues/552
It would remove the need for special configuration for deployments like vercel. https://github.com/auth0/nextjs-auth0/issues/383
As far as I can it would be completely safe for this behavior since auth0 configuration requires that you list the allowed callback URLs on the auth0 dashboard.
Thanks for all your hard work <3
Cheers!
1 Like
system
Closed
August 16, 2023, 9:20pm
4
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.