Cognito redirect_uri always defaults to localhost:3000

[jinwood]

Summary

Hey

I have a basic nextjs 13.4 app setup, I'm using aws cognito with next-auth and I use ngrok to provide https for local development.

I have an authOptions object

export const authOptions = {
  providers: [
    CognitoProvider({
      clientId: String(process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID),
      clientSecret: String(process.env.NEXT_PUBLIC_COGNITO_CLIENT_SECRET),
      issuer: String(process.env.NEXT_PUBLIC_COGNITO_ISSUER),
    }),
  ],
  theme: {},
};

In app/api/auth/[...nextauth]/route.ts I have:

import { authOptions } from "@/context/AuthContext";
import NextAuth from "next-auth";

console.log(`authOptions`, authOptions);
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

I'm rendering a login button on my homepage:

export const LoginButton = () => {
  const handleSignIn = async () => {
    const callbackUrl = `${process.env.NEXT_PUBLIC_NGROK_URL}/api/auth/callback/cognito`;
    console.log("login button callbackUrl", callbackUrl);
    await signIn("cognito", { callbackUrl });
  };

  return (
    <button
      className="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      onClick={() => handleSignIn()}
    >
      Sign in
    </button>
  );
};

In AWS Cognito, I have a userpool setup with integration to my app. The callback url is https://the-ngrok-url.app/api/auth/callback/cognito.

So, as far as I can tell, everything is configured correctly in terms of cognito details like client Id, secret etc. But the callback URL defaults to localhost:3000 and I can't work out how to explicitly set that to my ngrok url.

After clicking the sign in button I'm taken to:

Network tab contains:
https://my-app.auth.eu-west-2.amazoncognito.com/error?error=redirect_mismatch&client_id=some-id

Previous request includes:
https://my-app.auth.eu-west-2.amazoncognito.com/oauth2/authorize?client_id=some-id&scope=openid&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fcognito&state=L-R9PQ7Dmm26d_Iq8VbWuCB3dF3NrtQjipJwdcQi5rw

Is there a way to provide the redirect uri to next-auth or am I wiring this up incorrectly?

Any help greatly appreciated.

Additional information

No response

Example

No response

[davidwinter]

I'm encountering the exact same issue, and have tried a combination of options, but none seem to work. @jinwood did you find out how to get this to work?

[davidwinter]

For what it's worth, I got this working by specifying AUTH_URL value in my .env.local. You should try setting it to:

AUTH_URL="https://the-ngrok-url.app"

[davidwinter]

next-auth/packages/next-auth/src/lib/env.ts

Line 31 in 5c2b0b6

* Extract the origin from `NEXTAUTH_URL` or `AUTH_URL`

[ndom91]

We ran into this with a few providers and I think this may be the issue here too..

Although they allow you to set multiple callbackUrls, they'll always default to the first one, no matter what.

Try removing your callbackUrls in the Cognito dashboard and set a different one in the first position

[Di0nza]

Please tell me how to change the callbackUrl and signInUrl so that the request api/auth/providers returns not the localhost, but my domain here:

{
"google": {
"id": "google",
"name": "Google",
"type": "oidc",
"signinUrl": "http://localhost:3000/api/auth/signin/google",
"callbackUrl": "http://localhost:3000/api/auth/callback/google"
},
"credentials": {
"id": "credentials",
"name": "Credentials",
"type": "credentials",
"signinUrl": "http://localhost:3000/api/auth/signin/credentials",
"callbackUrl": "http://localhost:3000/api/auth/callback/credentials"
}
}

I tried changing NEXTAUTH_URL in the env file and the same <SessionProvider session={session} baseUrl={process.env.NEXTAUTH_URL}>, nothing works, I use next auth v5