Source: https://next-auth.js.org/v3/providers/workos

🎉 NextAuth.js is now part of Better Auth !

This is documentation for NextAuth.js v3, which is no longer actively maintained.

For up-to-date documentation, see the **latest version ** (v4).

Version: v3

On this page

Documentation

https://workos.com/docs/sso/guide

Configuration

https://dashboard.workos.com

Options

The WorkOS Provider comes with a set of default options:

WorkOS Provider options

You can override any of the options to suit your own use case.

Example

import Providers from `next-auth/providers`...providers: [  Providers.WorkOS({    clientId: process.env.WORKOS_CLIENT_ID,    clientSecret: process.env.WORKOS_API_KEY,  }),],...

WorkOS is not an identity provider itself, but, rather, a bridge to multiple single sign-on (SSO) providers. As a result, we need to make some additional changes to authenticate users using WorkOS.

In order to sign a user in using WorkOS, we need to specify which WorkOS Connection to use. A common way to do this is to collect the user's email address and extract the domain.

This can be done using a custom login page.

To add a custom login page, you can use the pages option:

pages/api/auth/[...nextauth].js

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

We can then add a custom login page that displays an input where the user can enter their email address. We then extract the domain from the user's email address and pass it to the authorizationParams parameter on the signIn function:

pages/auth/signin.js

import { getProviders, signIn } from "next-auth/client"export default function SignIn({ providers }) {  const [email, setEmail] = useState("")  return (    <>      {Object.values(providers).map((provider) => {        if (provider.id === "workos") {          return (            <div key={provider.id}>              <input                type="email"                value={email}                placeholder="Email"                onChange={(event) => setEmail(event.target.value)}              />              <button                onClick={() =>                  signIn(provider.id, undefined, {                    domain: email.split("@")[1],                  })                }              >                Sign in with SSO              </button>            </div>          )        }        return (          <div key={provider.id}>            <button onClick={() => signIn(provider.id)}>              Sign in with {provider.name}            </button>          </div>        )      })}    </>  )}// This is the recommended way for Next.js 9.3 or newerexport async function getServerSideProps(context) {  const providers = await getProviders()  return {    props: { providers },  }}/*// If older than Next.js 9.3SignIn.getInitialProps = async () => {  return {    providers: await getProviders()  }}*/