How to auto redirect to the provider login screen

[meleksomai]

I have a single provider (Okta) to login users to the portal. The portal does not have a landing page or any unauthenticated pages. Hence, I would like to have the following behavior:

• User logins to the website, ie. localhost:3000/
• If the user is not logged in, the user is redirected to the Okta login screen: https://xxxxx.okta.com/xxx
• Upon login, the user is redirected to the homepage.
• If the user logs out, the user is again redirected to the Okta provider login page.

I cannot find the option to bypass the NextAuth login page?

Any idea how to resolve this is welcomed!

[w0otness]

See: here
you would use signIn('okta').

[meleksomai]

Hey @w0otness ,

The issue is that I want to automatically redirect to the Okta login screen without having a user to click on the login button. Instead, I want a user logging to http://example.com to directly be directed to Okta login page without needing to go through the custom nextAuth page.

[balazsorban44]

just call signIn in a useEffect 👍

Make sure to handle the case when they are already logged in though.

[fredericoo]

That requires JS, and runs after hydration. Ideally one would be able to be redirected to it straight away.

Imagine a world where this would be possible:

  export const getServerSideProps = ({req, res}) => {
    const token = getToken(req, res);
    if (!token) return {
      redirect: {
        destination: getSignInUrl('provider-id')
      }
    }
    // if auth'd
  }

[meleksomai]

Thanks @balazsorban44 . The solution I came across.

1. Add a custom signin page under pages, for instance /pages/auth/signin.tsx:

import { signIn, useSession } from "next-auth/react";
import { useEffect } from "react";
import { useRouter } from "next/router";

export default function Signin() {
  const router = useRouter();
  const { status } = useSession();

  useEffect(() => {
    if (status === "unauthenticated") {
      console.log("No JWT");
      console.log(status);
      void signIn("okta");
    } else if (status === "authenticated") {
      void router.push("/");
    }
  }, [status]);

  return <div></div>;
}

2. Update the _middleware.tsx to redirect to the custom sign-in page.

import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/auth/signin",
  },
});

Note: I noticed that when I configure pages within the [...nextauth].ts instead of _middleware, the configuration does not work properly.

[jmiller-rise8]

Alright. I fixed it up on my end as well and you do not need to get the csrfToken outside of the cookie. Interesting. When we went down this route it wasn't allowing me to do it without one.

[CarlosMoralesR]

Thanks @balazsorban44 . The solution I came across.

1. Add a custom signin page under pages, for instance /pages/auth/signin.tsx:

import { signIn, useSession } from "next-auth/react";
import { useEffect } from "react";
import { useRouter } from "next/router";

export default function Signin() {
  const router = useRouter();
  const { status } = useSession();

  useEffect(() => {
    if (status === "unauthenticated") {
      console.log("No JWT");
      console.log(status);
      void signIn("okta");
    } else if (status === "authenticated") {
      void router.push("/");
    }
  }, [status]);

  return <div></div>;
}

2. Update the _middleware.tsx to redirect to the custom sign-in page.

import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/auth/signin",
  },
});

Note: I noticed that when I configure pages within the [...nextauth].ts instead of _middleware, the configuration does not work properly.

you just saved me so many hours, I was trying to find out exactly what this does, thank you!

[cdeutsch]

How are you all handling the session expiring when multiple tabs are open?

When I was using the auto signIn() code, all the tabs would immediately start the OAuth process. This created two issues. All tabs were sitting on the 3rd party's site waiting for login, when really you only need to login to one tab.

The second issue is next-auth only supports a single callback_url (stored in a cookie), so only one tab would get the correct page restored after login.

We ended up removing the auto signIn() code and now just have a "Click to begin login process" button instead. It's an extra click, but I felt like losing the state of all your open tabs was worse.

[federicocappellotto97]

I'll leave it here for other people getting my same error, i'm using nextjs with trailingSlash and setting pages in my middleware like this, was causing an infinite redirect loop:

pages: {
   signIn: '/auth/signin',
}

You need to add a slash to get it working: signIn: '/auth/signin/'

[Mario-Accr]

This worked perfectly, I'm amazed something so crucial and important is not yet implemented.

[bnssoftware]

And just in case anyone is interested in redirecting to the callback url instead of the root:

void router.push(router.query.callbackUrl);

[dylanbr0wn]

Tried this in Next 12.2 with no luck. I think due to middleware running on _next requests too now, catch-alls like this break.

I was able to get it working with the following middleware. Its pretty jank, essentially I had to override the default callback so it would always defer parsing to the middleware function. From there you can conditionally route based on pathname.

import { JWT } from "next-auth/jwt";
import { withAuth } from "next-auth/middleware"
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export default withAuth(
    (req: NextRequest & { nextauth: { token: JWT | null } }) => {
        if (req.nextUrl.pathname.startsWith('/auth') || req.nextUrl.pathname.startsWith('/_next')) {

            return NextResponse.next();
        }
        if (!req.nextauth.token) {
            const loginUrl = new URL("/auth/signin", req.url)
            loginUrl.searchParams.set('from', req.nextUrl.pathname)
            return NextResponse.redirect(loginUrl)
        }
        return NextResponse.next();
    },
    {
        callbacks: {
            authorized() {
                return true
            },
        },

    }
);

Feels like there should be a better way of doing this?

[GautheyValentin]

I don't know why, but in [email protected] i don't pass in first parameter of withAuth.
I had a other approach

export default withAuth({
  pages: {
    signIn: `/auth/signin`,
  },
  callbacks: {
    authorized: ({ token, req }: any) => {
      if (req.nextUrl.pathname.startsWith(`/_next`)) {
        return true;
      }

      const roles = token?.user?.roles as string[];
      return (
        roles?.includes(REALM_ROLE.ADMIN) ||
        roles?.includes(REALM_ROLE.EMPLOYEE)
      );
    },
  },
});

But definitely i thinks it's a bad idea because when you want to signout you will be redirect to signin. And depends of your providers you will logged immediatly after

[justinlevi]

@meleksomai The above solution is not working for me. The redirect back to '/' never happens and the app seems stuck on at http://localhost:8888/api/auth/signin?callbackUrl=%2F

Here is my api/auth/[...nextauth].ts

import NextAuth, { NextAuthOptions } from 'next-auth'
import OktaProvider from 'next-auth/providers/okta'

const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_DOMAIN } = process.env
export const options: NextAuthOptions = {
  providers: [
    OktaProvider({
      clientId: OKTA_CLIENT_ID ?? '',
      clientSecret: OKTA_CLIENT_SECRET ?? '',
      issuer: `${OKTA_DOMAIN}/oauth2/default`,
    }),
  ],
  session: {
    strategy: 'jwt',
  },
  jwt: {
    secret: OKTA_CLIENT_SECRET,
  },
  callbacks: {
    async jwt({ token, account, user }) {
      // Initial sign in
      if (account) {
        return {
          accessToken: account.access_token,
          accessTokenExpires: Date.now() + (account.expires_at ?? 0) * 1000,
          refreshToken: account.refresh_token,
          user,
        }
      }

      return token
    },
    async session({ session, token }) {
      session.user = token.user as
        | {
            name?: string | null | undefined
            email?: string | null | undefined
            image?: string | null | undefined
          }
        | undefined
      session.accessToken = token.accessToken
      session.error = token.error
      return session
    },
  },
}

const nextAuth = (req, res) => NextAuth(req, res, options)
export default nextAuth

middleware.ts

// export { default } from 'next-auth/middleware'

import { withAuth } from 'next-auth/middleware'
import { JWT } from 'next-auth/jwt'
import {
  NextRequest,
  // NextResponse
} from 'next/server'

export interface NextRequestWithAuth extends NextRequest {
  nextauth: { token: JWT | null }
}

export default withAuth(
  // function middleware(req: NextRequest) {
  //   if (
  //     req.nextUrl.pathname.startsWith('/auth') ||
  //     req.nextUrl.pathname.startsWith('/_next')
  //   ) {
  //     return NextResponse.next()
  //   }
  //   if (!(req as NextRequestWithAuth).nextauth.token) {
  //     const loginUrl = new URL('/auth/signin', req.url)
  //     loginUrl.searchParams.set('from', req.nextUrl.pathname)
  //     return NextResponse.redirect(loginUrl)
  //   }
  //   return NextResponse.next()
  // },
  {
    callbacks: {
      authorized: async ({ req }) => {
        const pathname = req.nextUrl.pathname

        if (
          pathname.startsWith('/_next') ||
          pathname === '/favicon.ico' ||
          pathname === '/__ENV.js'
        ) {
          return true
        }

        return false
      },
    },
    pages: {
      signIn: '/auth/signin',
    },
  }
)

Here is my signin.tsx

import { useSession, signIn } from 'next-auth/react'
import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function Signin() {
  const router = useRouter()
  const { status } = useSession()

  useEffect(() => {
    if (status === 'unauthenticated') {
      signIn('okta')
    } else if (status === 'authenticated') {
      router.push('/')
    }
  }, [router, status])

  return <div></div>
}

There seems to be an infinite loop happening for some reason

[dylanbr0wn]

Correct me if im wrong, but it looks like you arnt making any exceptions in your callback function for your auth/signin page? Hence, even on your sign in page the middleware is running and the callback will return false and redirect you to auth/signin again infinitely.

Adding some conditional logic to your middleware or callback function to disable redirecting on the auth/signin page if not authenticated should prevent this infinite loop.

[justinlevi]

I was able to get past this issue by adding the following line to my authorized callback function in the middleware.

if (token) return true

Here is the final version
middelware.ts

import { withAuth } from 'next-auth/middleware'
import { JWT } from 'next-auth/jwt'
import {
  NextRequest,
  // NextResponse
} from 'next/server'

export interface NextRequestWithAuth extends NextRequest {
  nextauth: { token: JWT | null }
}

export default withAuth({
  callbacks: {
    authorized: async ({ req, token }) => {
      const pathname = req.nextUrl.pathname

      if (
        pathname.startsWith('/_next') ||
        pathname === '/favicon.ico' ||
        pathname === '/__ENV.js'
      ) {
        return true
      }

      if (token) return true

      return false
    },
  },
  pages: {
    signIn: '/auth/signin',
  },
})

[brendonco]

For keycloak, any other way to redirect to keycloak login page instead redirecting from a custom signin page?

[jmiller-rise8]

#4078 (comment)

[jmiller-rise8]

My team is using Next.js 13 app directory. We found that the signin page solution was not going to do the job.

Our solution simply takes next-auth's solution and combines it with some of the sign in implementation. I'm not super happy with this yet as I would prefer not to make api fetches to the server but this does work and it's relatively clean.

If you are using an SSO provider then you will need to make sure any sign out button actually signs you out from the provider and not just the app or you will just be signed back in. I can provide further guidance on our solution for that as well.

// middleware.ts
/**
 * See [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime)
 * for more information about Next.js middleware.
 */
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 { getCsrfToken } from "next-auth/react";
import type {
  NextAuthMiddlewareOptions,
  NextMiddlewareWithAuth,
  WithAuthArgs,
} from "next-auth/middleware";
import { DEFAULT_PROVIDER } from "./utils/auth";

/**
 * This hash function relies on Edge Runtime.
 * Importing node.js crypto module will throw an error.
 */
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 | 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;

  // the user is authorized, let the middleware handle the rest
  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/${DEFAULT_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,
      callbackUrl: req.url,
      json: "true",
    }),
  });
  const data = (await res.json()) as { url: string };

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

export function withAuth(...args: WithAuthArgs) {
  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 default withAuth({});

export const config = {
  matcher: [
    // This matcher is necessary to capture the origin route
    "/",
    // Do not match public pages or auth routes
    "/((?!api/auth|_next|public|favicon.ico|logo.svg).*)",
  ],
};

[benjamin-musil]

This looks awesome, but I'm not on Vercel and the code is a bit intimidating for me to figure out how to fix it for my Next.js 13.4 and custom OAuth provider.

When I try it, defining DEFAULT_PROVIDER with my string ('wp'), I get this error:

Error [SyntaxError]: Unexpected token E in JSON at position 0

Unfortunately also running into the same issue as @theDanielJLewis . I tried another middleware implementation someone wrote from this thread: #4800 (comment) with the same exact error.

Guess I'll have to use the client side sessionprovider validation for now...

[AliakseiPaseishviliSyntheticabio]

@jmiller-rise8 Your solution is really cool, but I faced with one issue:
So when we are doing login(in keycloak) and wait for more then 5 minutes, and return back to app after successful login(in keycloak)), we got error with:

    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'keycloak',
  message: 'State cookie was missing.'

where next-auth asks to login again. (after choosing provider it app just starts to work as expected.)

[stern-shawn]

Has anyone had luck reproducing this with v5? Thanks to these examples I had a version that worked with v4, but the fetch is now failing after an upgrade; I think I'm struggling to pass the provider the same way as is expected in the new parseActionAndProviderId method 😕

[jmiller-rise8]

@stern-shawn I think they want us doing using the following:

https://authjs.dev/guides/upgrade-to-v5#authenticating-server-side https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/middleware.ts

[stern-shawn]

@jmiller-rise8 This recent suggestion works for me in v5: #4078 (comment)

Maybe take a look? It saved me a ton of code compared to what I needed before 😄

[pablote]

It'd be nice if something like this worked. Just have the signin page receive a provider name (the callback endpoint already does this) and skip the login page, but doing this shows the login page:

export const getServerSideProps: GetServerSideProps<{}> = async (context) => {
  //TODO: I'd prefer to do this server side, but for some reason this is not going to okta directly
  const session = await getServerSession(context.req, context.res, authOptions);
  if (!session) {
    return {
      redirect: {
        destination: "/api/auth/signin/okta",
        statusCode: 302,
      },
    };
  }

  return {
    props: {},
  };
};

[ys-sherzad]

@pablote I have a similar approach, but I'm struggling to find out why it's darn slow, the render takes more than 4 seconds, at first I though it might be a cold start but that's not the case. Have you experiences similar thing, I'm Postgres to store the session (prisma) and deployed on Vercel:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getServerSession(context.req, context.res, authOptions)
  if (session) {
    return {
      redirect: {
        destination: `${baseUrl}/marketplace`,
        permanent: false,
      },
    }
  }

  const providers = await getProviders()
  return {
    props: { providers },
  }
}

[pablote]

Sorry I don't remember it being slow, although I ended up not using this code. Is it the getServerSession or getProviders that runs slow? Maybe you can check the source code to see what they do.

[theDanielJLewis]

I adapted @meleksomai's code for the Next.js 13 app router.

app/auth/layout.tsx

'use client';
import { SessionProvider, getSession } from "next-auth/react";
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getSession();

  return (
    <SessionProvider session={session}>
      <html lang="en">
        <body>
          {children}
        </body>
      </html>
    </SessionProvider>
  );
}

app/auth/page.tsx

'use client';
import { signIn, useSession } from 'next-auth/react';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function Signin() {
  const router = useRouter();
  const { status } = useSession();

  useEffect(() => {
    if (status === 'unauthenticated') {
      console.log('No JWT');
      console.log(status);
      void signIn('okta');
    } else if (status === 'authenticated') {
      void router.push('/');
    }
  }, [status]);

  return <div></div>;
}

In my own case, I gave the page a little bit of styling, a spinner, and a "Logging in..." message.

[henricook]

I'm doing this but still see the 'sign in with okta' button - does this auto redirect to Okta for you?

Is there more to it? I'm just using the next-auth default middleware with export { default } from "next-auth/middleware"

[nikolaphilipp]

Nice work, exactly what I needed. Works like a charm, thanks :)

[hakan-akgul]

This works for me with little updates

"next": "^14.1.0",
"next-auth": "^4.24.5",
"react": "^18.2.0",

// src/app/api/auth/signin/page.tsx

'use client'

import { signIn, useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'

export default function SignIn() {
    const router = useRouter()
    const { status } = useSession()

    useEffect(() => {
        if (status === 'unauthenticated') {
            signIn('cognito')
        }
        else if (status === 'authenticated') {
            router.push('/')
        }
    }, [ router, status ])

    return (
        <div/>
    )
}

// src/app/api/layout.tsx

'use client'

import { SessionProvider } from 'next-auth/react'

interface Props {
    children: React.ReactNode
}

export default function AuthLayout(props: Props) {
    return (
        <SessionProvider>
            { props.children }
        </SessionProvider>
    )
}

// src/middleware.ts

export { default } from 'next-auth/middleware'

export const config = { matcher: [ '/' ] }

[collinclarke]

In order to achieve the same redirect behavior as the original NextAuth sign in page you can update the component like so:

import { useSearchParams, useRouter } from 'next/navigation';
import { signIn, useSession } from 'next-auth/react';
import { useEffect } from 'react';

export default function Signin() {
  const router = useRouter();
  const { status } = useSession();
  const searchParams = useSearchParams();

  const callbackUrl = searchParams.get('callbackUrl');

  useEffect(() => {
    if (status === 'unauthenticated') {
      signIn('okta');
    } else if (status === 'authenticated') {
      router.push(callbackUrl || '/');
    }
  }, [status, router, callbackUrl]);

  return <div></div>;
}

[minyiediazvelir]

This worked for me thank you very much.

[zebhasnat]

"use client";
import React, { useState, useEffect } from "react";
import { signIn, signOut, useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
const Navbar = () => {
const router = useRouter();
const { data: session, status } = useSession();

if (status === "authenticated" && session?.user?.jwt && !session) {
return router.push("/home");
} else {
return router.push("/api/auth/signin");
}
};

export default Navbar;

[Firgrep]

Been tinkering with this issue on my side as well. A few slight changes to @jmiller-rise8 's recipe. By the way, thanks immensely for putting it up! It's been very helpful.

As with @renet , the import { getCsrfToken } from "next-auth/react"; along with the lines of code that used it had to be removed, since it would not build using that. Immediate implementation doesn't break but we've been getting some irregular errors about JSON tokens/parameters not being in the right position; not sure if that's related to this or with something else.

the getToken() function is able to figure out on its own whether to use http or https as long as you don't pass in a cookieName. So I've omitted that.

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

However, still need to specify the correct cookieName for the request to the provider (using Okta). So I do a check in the middleware and pass that along with the request.

		const isSecure = host.startsWith("https://") ?? false;
	  	const cookieName = isSecure
			? "__Host-next-auth.csrf-token"
			: "next-auth.csrf-token";

		const res = await fetch(`${host}/api/auth/signin/<provider>`, {
			method: "post",
			headers: {
				"Content-Type": "application/x-www-form-urlencoded",
				"X-Auth-Return-Redirect": "1",
				cookie: `${cookieName}=${cookie}`,
			},
			credentials: "include",
			redirect: "follow",
			body: new URLSearchParams({
				csrfToken,
				callbackUrl: req.url,
				json: "true",
			}),
		});

[jmiller-rise8]

Nice! This is great! Really glad you were able to accommodate to your needs. I think there is some potential for offering a middleware solution as PR at some point so that this functionality can be out-of-the-box.

[Firgrep]

There is indeed! Especially as Nextjs and React are making a big push towards server components, something like this should be essential.

I've updated my comment a bit, as we've been having some irregular bugs crop up and unsure whether it's the middleware or nextAuth - so we'll be doing some tests running purely clientside to try to isolate the issue. Will report back if we come across anything useful.

[dgarciamuria]

In case anyone is looking for some alternative approach, this is what I ended up doing:

//auth.ts
NextAuth({
    pages: {
      signIn: "/api/signin",
    },
    //... rest of your config
  })

// api/signin/route.ts
import { signIn } from "@/auth";

export async function GET(req: Request) {
  const searchParams = new URL(req.url).searchParams;
  return signIn("auth0", { redirectTo: searchParams.get("callbackUrl") ?? "" });
}

that way I didn't have to deal with pages or useEffects
works with [email protected]

[liamlows]

Thanks man this helped me a ton! Wish you could just redirect the user to something like /api/auth/signin/keycloak but for some reason that throws an error.