Auto redirect to azure signin in Next 13.

[mildfuzz]

Question 💬

I am trying to figure out the best way to remove the interstitial screen and go straight to the Azure signin page. I think the way to do it is to implement a custom sign in page that handles the redirect.

// /auth/signin/page.tsx

export default async function SignIn() {
  const providers = await getProviders()

  return <SigninClient providers={providers} />
}

// signClient.tsx
'use client'

export const SigninClient = ({
  providers,
}: {
  providers: Record<string, ClientSafeProvider>
}) => {
  useEffect(() => {
    signIn(providers['azure-ad'].id)
  }, [providers])

  return <>Sign In</>
}

// /api/auth/[...nextauth]/route.ts
export const authOptions: AuthOptions = {
  pages: {
    signIn: '/auth/signin',
  },
  providers,
  callbacks,
}

Out of the box with default middleware, I get into a redirect loop:

To fix that, I filter the auth directory out of the middleware scope:

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with auth
     */
    '/((?!/auth/.*))',
  ],
}

But now, I get odd redirect behaviour where when I hit the root URL, I correctly get redirected to the signin page, but after sign in, I do not get sent back to the root URL I started on.

Have I missed a step? I am expecting to be redirected back to the initial URL before the auth redirect started.

[balazsorban44]

There's no reproduction, so just guessing, but make sure that your middleware config is also aware of the custom signin page

https://next-auth.js.org/configuration/nextjs#pages

[RicardoAvans]

@mildfuzz how did you fixed this eventually?