Allow selection of provider in middleware (or other way to skip the NextAuth login page in favour of the OAuth one)

[SoftMemes]

Description 📓

I use nextauth together with Auth0 as the only provider, and basically always want to use the Auth0 universal login page as the login page, instead of a local one in Next, the default one provided by NextAuth, etc.

For login triggered by the client, this can be done by always specifically selecting the provider, e.g. signIn('auth0'), but I see no matching option for this when using middleware.

It would be highly valuable to be able to do this through the middleware for protecting some pages, to centralise this login in one place instead of having to rely on client side checks for these pages.

How to reproduce ☕️

• Build a new site using Nextauth where some pages should be protected.
• Observe that the middleware directs you to the default "pick a provider screen" rather than directly to the OAuth login page, even when there is only one provider configured

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[SoftMemes]

FWIW, I have worked around this now by using a custom sign in page in the middleware config, with the page immediately calling signin for my provider from the browser on load. This works, but feels a bit clunky as it's another few calls and redirects before the user ends up on the actual login page.

[KihyukYoo]

i need the option like skip choose provider too

[eric-hc]

Any updates on this? There is a way to do this client-side by passing provider in signIn parameter, but seems like no option for Middleware 😭

[eric-hc]

I have been trying to reproduce this functionality from the client, but in middleware in order to build the provider authorization URL, however have been running issues getting directed to /signin?csrf=true, or the default login page.

[MontiMarco92]

I am having the same problem. It would work just fine in my local server, but when I deploy to vercel, it would redirect to the /signin?csrf=true unfortunately.

[tiffkwin]

Enabling this functionality in middleware would make the login process much cleaner as an application that uses only one provider. Would love to see this implemented

[ryanhaticus]

I'd love to see this. +1

[LoganArnett]

+1

[juicylevel]

+1

[gabuvi7]

yeah, i think if we have a possibility to add a providers in the middleware would be clear to manage authorizations/authentications 🤞

[lewsmith]

I use keycloak so any extra providers in addition to the standard email/password login, such as Google etc, are setup directly in keycloak.

Because of this I also had the need to bypass this list screen and just skip straight to keycloak to keep the auth process slick.

This is how I've done it:

Created middlewares/withAuthorization.ts (this basically just replaces next-auth's version, will PR when I get a bit of time):

import type { NextMiddleware, NextRequest } from "next/server";
import { NextResponse} from "next/server";
import type { JWT } from "next-auth/jwt";
import { getToken } from "next-auth/jwt";
import type {
  NextAuthMiddlewareOptions,
  NextMiddlewareWithAuth, WithAuthArgs,
} from "next-auth/middleware";
import {BuiltInProviderType, RedirectableProviderType} from "next-auth/providers";
import { getCsrfToken } from "next-auth/react";
import {LiteralUnion} from "next-auth/react/types";

async function hash(value: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(value);
  const hash = await crypto.subtle.digest("SHA-256", data);
  const hashArray = Array.from(new Uint8Array(hash));
  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
}

interface AuthMiddlewareOptions extends NextAuthMiddlewareOptions {
  trustHost?: boolean;
}

async function handleMiddleware(
  req: NextRequest,
  options: AuthMiddlewareOptions & {provider?: string} | undefined = {},
  onSuccess?: (token: JWT | null) => ReturnType<NextMiddleware>
) {
  const { origin, basePath } = req.nextUrl;
  const errorPage = options?.pages?.error ?? "/api/auth/error";

  options.trustHost ??= !!(
    process.env.NEXTAUTH_URL ??
    process.env.VERCEL ??
    process.env.AUTH_TRUST_HOST
  );

  const host = process.env.NEXTAUTH_URL ?? req.headers?.get("x-forwarded-host") ?? "http://localhost:3000";

  options.secret ??= process.env.NEXTAUTH_SECRET;
  if (!options.secret) {
    console.error(
      `[next-auth][error][NO_SECRET]`,
      `\nhttps://next-auth.js.org/errors#no_secret`
    );

    const errorUrl = new URL(`${basePath}${errorPage}`, origin);
    errorUrl.searchParams.append("error", "Configuration");

    return NextResponse.redirect(errorUrl);
  }

  const token = await getToken({
    req,
    decode: options.jwt?.decode,
    cookieName: options?.cookies?.sessionToken?.name,
    secret: options.secret,
  });

  const isAuthorized = (await options?.callbacks?.authorized?.({ req, token })) ?? !!token;

  if (isAuthorized) return onSuccess?.(token);

  const cookieCsrfToken = req.cookies.get("next-auth.csrf-token")?.value;
  const csrfToken = cookieCsrfToken?.split("|")?.[0] ?? (await getCsrfToken()) ?? "";
  const csrfTokenHash = cookieCsrfToken?.split("|")?.[1] ?? (await hash(`${csrfToken}${options.secret}`));
  const cookie = `${csrfToken}|${csrfTokenHash}`;

  const res = await fetch(`${host}/api/auth/signin/${options.provider ?? ''}`, {
    method: "post",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "X-Auth-Return-Redirect": "1",
      cookie: `next-auth.csrf-token=${cookie}`,
    },
    credentials: "include",
    redirect: "follow",
    body: new URLSearchParams({
      csrfToken,
      // Modified from the original middleware as redirect did not seem to work for me with req.url
      callbackUrl: req.nextUrl.pathname,
      json: "true",
    }),
  });

  const data = (await res.json()) as { url: string };

  return NextResponse.redirect(data.url, {
    headers: {
      "Set-Cookie": res.headers.get("set-cookie") ?? ""
    },
  });
}

export declare type WithAuthProviderArgs = [
  ...WithAuthArgs & [
      {
        provider: LiteralUnion<RedirectableProviderType | BuiltInProviderType>
      }
    ]
];

export function withAuth(...args: WithAuthProviderArgs) {

  if (!args.length || args[0] instanceof Request) {
    return handleMiddleware(...(args as Parameters<typeof handleMiddleware>));
  }

  if (typeof args[0] === "function") {
    const middleware = args[0];
    const options = args[1] as NextAuthMiddlewareOptions | undefined;
    return async (...args: Parameters<NextMiddlewareWithAuth>) =>
      await handleMiddleware(args[0], options, async (token) => {
        args[0].nextauth = { token };
        return await middleware(...args);
      });
  }

  const options = args[0];
  return async (...args: Parameters<NextMiddleware>) => await handleMiddleware(args[0], options);
}

export function withAuthProvider(provider: LiteralUnion<RedirectableProviderType | BuiltInProviderType>, ...args: WithAuthArgs) {
  return withAuth({...args, provider});
}

Now, in your next middleware.ts you can specify the provider:

import { withAuthProvider } from "./middlewares/withAuthorization";

export default withAuthProvider('keycloak');

// You could also use the standard withAuth, and specify the provider. e.g. withAuth({ provider: 'keycloak' })

export const config = {
  matcher: [
    // Example of securing anything under /secured
    "/secured",
    "/secured/(.*)",
  ],
};

Seems to work okay, but I'm not exactly a ts pro, so if anyone wants to test or has improvements that would be great.

BTW, if you specify a provider that you don't have setup it should default back to the provider list screen.

[ianibo]

Yup - thanks! Working beautifully for me locally - going to have a go at debugging the vercel end of things this evening :)

[lewsmith]

@ianibo what provider are you using, if you don't mind me asking?

[ianibo]

@lewsmith - Keycloak (20.0.3 on the server side)

[benjamin-musil]

I'm also in the camp of trying to use next-auth, Next 13, and middleware to go straight to our Keycloak SSO page. Unfortunately the above middleware script isn't working for me (SyntaxError: Unexpected token E in JSON at position 0). I commented out the getCsrfToken import like was done here in another rewrite of withAuth: #4078 (comment) but had no success and I get the same error.

I've seen dozens of discussions/issues begging for a default provider option or a way to skip next-auth login screen through middleware only but looks like we're still waiting on that.... Will have to check session on the client side as workaround for now.

[noah-rss]

Have any of you been using this in production? Any updates on reliability?

[NNQA]

import NextAuth from "next-auth"
import AppleProvider from "next-auth/providers/apple"
import GoogleProvider from "next-auth/providers/google"
import EmailProvider from "next-auth/providers/email"


export default NextAuth({
  providers: [
    // OAuth authentication providers
    GoogleProvider({
      clientId: process.env.GOOGLE_ID as string,
      clientSecret: process.env.GOOGLE_SECRET as string,
    }),
    // Sign in with passwordless email link
  ],
})
``` button.tsx
'use client'
import React from 'react'
import { useSession, signIn, signOut } from "next-auth/react"
function L_btn() {
    const { data: session } = useSession()
    if (1) {
        return (
            <>
                Signed in as  <br />
                <button onClick={() => signOut()}>Sign out</button>
            </>
        )
    }
    return (
        <>
            Not signed in <br />
            <button onClick={() => signIn()}>Sign in</button>
        </>
    )
}

export default L_btn

export default function RootLayout(
  {
    children,
   }: { 
    children: React.ReactNode }
  )  {
  return (
    <html lang="en">
      <body>
 {children}
      </body>
    </html>
  )
}

but it's wrong, who can help me, auth google login nextjs 13.2

[NNQA]

if i add file like u, it will wrong

[NNQA]

this file Layout in /app

[lewsmith]

You need to update your typings to add session to your AppProps:

https://github.com/nextauthjs/next-auth-typescript-example/blob/911a21d778072a146a3f9f123782ea5f2d846627/types/next.d.ts

[NNQA]

no change :(

[lewsmith]

Not sure of the issue without seeing your code.

All I can say it to check the .d.ts file you added the definitions to is being picked up. E.g. make sure you're including it in your tsconfig.json in either the types option or, if you've put it in a directory, the typeRoots option. Then make sure to restart the Typescript Server using the VScode command pallet (or just restart vsc).

I'm no TS guru, and I didn't have any issues after following the Typescript section of the Next-Auth guide and looking at the demo app, so can't really give any more advice than that.

Maybe post a new discussion as this is a bit off topic in here.

[arnotixe]

One good/bad side effect to auto-selecting the only provider is that if you log out and then hit a protected route, it will immediately re-login. You can't stop the page from logging in any more 🙃, except temporary by specifying a non-protected URL to signOut, like signOut({ callbackUrl: '/public/page'});

-Until someone comes up with some clever flag.

If manually selecting a login provider, the user must click at least 1 button to actually login. Even if it's the only button.

But I agree it looks like a UX bug to show just 1 option to a user 😁 In that case it would be better to have a secondary "abort" button so that users at least have a choice to do nothing…

[olavocarvalho]

@arnotixe you need to logout the user from the provider because the signOut method only empty the session. When using OAuth as example, you should perform a POST request to the /signout endpoint or redirect the user to logout flow from your provider. Here is an example of how I'm doing in the client-side (From Azure AD B2C perspective but will work with any Oauth provider).

const id_token = session?.tokens.id_token ?? ""
    signOut({
      redirect: false,
    }).then(() =>
      router.push(
        `https://${process.env.AZURE_AD_B2C_TENANT_NAME}.b2clogin.com/${process.env.AZURE_AD_B2C_TENANT_NAME}.onmicrosoft.com/${process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW}/oauth2/v2.0/logout?post_logout_redirect_uri=${process.env.NEXTAUTH_URL}&id_token_hint=${id_token}`
      )
    )

[noah-rss]

Can we revive this idea, please?
Is there any reason this hasn't been implemented or are we just waiting for a contributor?

[eric-hc]

Could be because Next Auth is becoming Auth.js?

[wangerzi]

I have a client solution, my providers will change in different sites, some site has only one provider, so I can use getProviders from next-auth/react and get the only provider id for signIn function.

Refer:
https://next-auth.js.org/getting-started/client#getproviders
https://next-auth.js.org/getting-started/client#redirects-to-sign-in-page-when-clicked

eg:

import { getProviders, signIn, signOut } from "next-auth/react";
const handleSignIn = async () => {
    console.log("Sign-in start");
    try {
      const providers = await getProviders();
      let autoSign: BuiltInProviderType | undefined = undefined;
      if (providers && Object.keys(providers).length === 1) {
        let current = providers[Object.keys(providers)[0]];
        if (current.type === 'oauth') {
          autoSign = current.id as BuiltInProviderType
        }
      }
      
      await signIn(autoSign, {
        callbackUrl: generateLoginCallbackUrl(),
        redirect: true,
      });
    } catch (error) {
      console.error("Error during sign-in:", error);
    } finally {
      console.log("Sign-in end");
    }
  };

[SultanNasyrovDeveloper]

Any updates on this?

[isoroka-plana]

Also looking for a feature like this. There isn't much sense in displaying a page with a single button when there's only one provider.

[lud-hu]

Totally agree!
It would be nice to just have a simple option in the existing middleware to forward to a specific provider. Any chance there'll be a new feature like that?

[CarbonNeuron]

This seriously needs to be implemented, I only have 1 auth provider.

[Murimi-Njiru]

This worked for me. #4078 (comment)
I think it's the best answer