Issues with creating a custom provider

[sethhoward-dd]

I'm struggling to create a custom provider, mostly around the redirect_uri.

I'm creating a custom provider, and the page that the auth check is performed at is at:

http://localhost:3000/auth/signin

After running the signIn() function from there, the page gets redirected to the login portal, but the redirect_uri is set to:

http://localhost:3000/api/auth/callback/identity-service

So a few questions here are: why is the redirect_uri being automatically set to this? I can't find a way to override it with anything other than that, and specifying a callbackUrl in the signIn() function doesn't change anything. What is the correct flow here? Do I need to implement a GET call at the redirect-uri that does what exactly?

I should note here that my [nextauth].js file lives in /api/auth/[nextauth].js

So nothing is implemented at /api/auth/callback/identity-service

Below is the provider config.

{
  id: "identity-service",
  name: "Identify Service",
  type: "oauth",
  version: "2.0",
  scope: "*",
  accessTokenUrl: "https://example.com/auth",
  requestTokenUrl: "https://example.com/auth",
  authorizationUrl: "https://example.com/auth?response_type=code",
  profileUrl: "https://example.com/api/v1/auth/token",
  async profile(profile, tokens) {
    return {
      id: profile.id,
      name: profile.name,
      email: profile.email,
      image: profile.picture
    }
  },
  clientId: "xxxxxx",
}

[balazsorban44]

make sure the file is called [...nextauth].js! Learn more about catch-all routes at https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes

The url you are seeing is the one the provider will send the response to, to execute the signin flow. Check out

https://auth0.com/docs/flows/authorization-code-flow

for more info. (number 5 and 6 on the picture is what I'm talking about here)

This is usually referred to as return or callback url, and you have to add this url somewhere in your provider, where you set up the client for your app.

https://next-auth.js.org/getting-started/rest-api#get-apiauthcallbackprovider

Adding a callbackUrl in the second argument of signIn call will make sure you are going to be redirected to any page you want after a successful login. The default is the same page. check the docs:
https://next-auth.js.org/getting-started/client#specifying-a-callbackurl

[sethhoward-dd]

OK I verified that the file is named [...nextauth].js, and it is. But the callback URL is still not implemented by NextAuth.

Error: HTTP GET is not supported for /api/auth/callback/identity-service

I've logged the provider object when the callbackUrl is added here, and it is getting parsed correctly as it looks like this:

callbackUrl: 'http://localhost:3000/api/auth/callback/identity-service'

When you say "This is usually referred to as return or callback url, and you have to add this url somewhere in your provider, where you set up the client for your app." where exactly is that configured?

[balazsorban44]

In your OAuth provider, specific for that client you set up for your app. Since you say it's a custom one, it's hard to tell you where you can find it. Try to look at our built-in providers for inspiration https://next-auth.js.org/configuration/providers#built-in-oauth-providers

This URL must be specified in the provider so it knows it is safe to redirect to it when executing the auth flow.

The callbackUrl in signIn is the url you as the user want to end up on! you shouldn't add the above mentioned url to it.

I know, it's a bit confusing. You have two types of callback urls in this scenario.

one that you shouldn't care about as long as you specify it in your OAuth provider.

and one that you set in signIn/signOut for the user to land on afterwards. if you don't set it, it's fine too, the user will end up on the same page they started on.