Skip providers page if there's only one provider listed

[unitedvetcaretech]

Hello!

I have an app where we only integrate with one provider (e.g. for an internal app)

Is there any way to set it to bypass the "Sign in with..." page, and instead go directly to the idp's login page?

I've looked through the providers docs but haven't seen anything.

Thanks!

[balazsorban44]

Absolutely: https://next-auth.js.org/getting-started/client#starts-oauth-sign-in-flow-when-clicked

[swand0g]

yeah wonder if there's a way to do this programmatically on server-side 🤔

[cahaseler]

For now my answer was to use a custom page. It's actually pretty lightweight, but you do definitely have a half second or so of time for the redirect to kick in.

middleware.ts:

import { withAuth } from "next-auth/middleware";
export default withAuth({
  pages: {
    signIn: "/signIn",
  },
});

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") {
      void signIn("okta");
    } else if (status === "authenticated") {
      void router.push("/");
    }
  }, [status, router]);

  return <div></div>;
}

[eric-hc]

Yeah it is not ideal for our use case unfortunately - have also been trying to follow this discussion as well.

[arnotixe]

@cahaseler I went with your solution for now, just a little modified:

• For the next13 app/ router, you need to wrap your Signin page in <SessionProvider /> and import useRouter from next/navigation instead of from next/router.

• You also probably want to try and parse the callbackURL too, so that the user gets pushed thereto instead of to "/" always.

• This solution also has the [intended?] side effect 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'});

"use client";

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

const SignIn = () => {
  const router = useRouter();
  const { status } = useSession();

  useEffect(() => {
    if (status === "unauthenticated") {
      void signIn("keycloak");
    } else if (status === "authenticated") {
      const callbackUrl = window.location.search.includes("callbackUrl=")
        ? decodeURIComponent(
            window.location.search.replace(/^\?callbackUrl=/, "")
          )
        : "/"; // better than nothing
      void router.push(callbackUrl);
    }
  }, [status, router]);

  return null;
};

const WrappedSignIn = () => (
  <SessionProvider>
    <SignIn />
  </SessionProvider>
);
export default WrappedSignIn;

[muhaimincs]

what if signIn for credentials

[ofuochi]

yeah wonder if there's a way to do this programmatically on server-side 🤔

Someone did a great job here

[majkel89]

Replace

<button onClick={() => signIn()}>
  Sign In
</button>

with

<button onClick={() => signIn('github')}>
  Sign In
</button>

and that is it, no need for middlewares.

[SultanNasyrovDeveloper]

+1

[leog]

Just in case it helps someone, using React Server Components, I was able to skip the provider page configuring a custom page for signin which is a Server Component with the following code: https://gist.github.com/leog/8f713ba75e83d1ddd220455e3a89ee0c