Next-auth: Link to custom sign in provider

[simonbbyrne]

Your question
Is this feature still available? It currently seems to goes to the list of providers

What are you trying to do
Link to auth0 custom sign in provider /api/auth/signin/auth0 to sign user in directly

https://next-auth.js.org/configuration/providers

• [x] Found the documentation helpful
• [ ] Found documentation but was incomplete
• [ ] Could not find relevant documentation
• [x] Found the example project helpful
• [ ] Did not find the example project helpful

[iaincollins]

Ah! Good spot, thanks for asking about that. I think we probably need to update that section.

Until version 3.x an HTTP GET request to the URL could initiate a sign in journey, this made it easy to create custom sign in buttons.

To prevent an of XSS attack initiating signing in a user who had previous signed in, but then signed out again using something like a targeted iFrame on another site, these routes now require an HTTP POST request with CSRF forgery.

Some other sites use a GET request to start the journey, and it's not an inherent vector for doing something malicious (depending on how they use some other OAuth options in the flow), but is not ideal, as would allow a user to sign back in without their express consent, so was changed to not support this and to instead to display a list of the configured providers as fallback behaviour (so as not to be too onerous for people upgrading from 2.x).

So that it is still easy to create custom sign in buttons, the provider ID can be passed to the signIn() button.

e.g.signIn('google'), signIn('twitter') , signIn('auth0') (etc)

…which handles getting the CSRF token and submitting a POST request automatically so initiates the flow without an intermediate page.

[simonbbyrne]

Thank you for the quick response Iain. I understand now why it was removed.

My plan is to use Auth0 provider for all my authentication needs. I'm currently redirecting in to /api/auth/signin/auth0 when the session is unavailable. I attempted to trigger the auth0 flow .

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getSession(context);
  if (!session || !session.user) {
    context.res.writeHead(302, {
      Location: '/api/auth/signin/auth0',
    });
    context.res.end();
    return;
  }

  return { props: {} };
};

In this case, should I create a custom signin page and call signIn('auth0') when we mount to initiate the flow?

[iaincollins]

Ah yes, that seems like a good approach!

This is a good argument for NextAuth providing a better way of optionally redirecting folks who are not signed in.