Admin and User authentication with different providers

[zakaryan2004]

I want to make two separate authentications in my app, one for the admin (with Google OAuth2), and another for the user (Credentials provider). I have wrapped the two parts of my application with separate SessionProviders, made two separate API endpoints and set up the providers. The only problem I have now is the NEXTAUTH_URL env var. If I set this it the user API's endpoint, user authentication works, but admin breaks, and vice versa. I want to know if I am approaching this problem correctly and what the best solutions are. Thanks.

[balazsorban44]

hi, could you share your approach? (some code/repo)I would probably use a role property on the session, rather than two separate SessionProvider.

If the user uses credentials, set it to admin, otherwise set it to user. Or you can have an even more simple isAdmin boolean as well, that is only set if someone's logs in with the credentials provider.

[zakaryan2004]

Sorry, I didn't detail it at all.

So, what I am currently doing is something like this:

Two API routes:
/api/admin/auth/[...nextauth].js
This has Google OAuth2 provider set up.

/api/auth/[...nextauth].js
This has a Credentials provider set up.

Then, I have two Layout components which I reuse accross pages:
admin_layout.js

import * as React from 'react'
import Header from '../src/header'
import { SessionProvider } from 'next-auth/react'

export default function AdminLayout({ children }) {
    return (
        <SessionProvider
            // Provider options are not required but can be useful in situations where
            // you have a short session maxAge time. Shown here with default values.
            options={{
                // Client Max Age controls how often the useSession in the client should
                // contact the server to sync the session state. Value in seconds.
                // e.g.
                // * 0  - Disabled (always use cache value)
                // * 60 - Sync session state with server if it's older than 60 seconds
                clientMaxAge: 0,
                // Keep Alive tells windows / tabs that are signed in to keep sending
                // a keep alive request (which extends the current session expiry) to
                // prevent sessions in open windows from expiring. Value in seconds.
                //
                // Note: If a session has expired when keep alive is triggered, all open
                // windows / tabs will be updated to reflect the user is signed out.
                keepAlive: 0,
                basePath: "/api/admin/auth"
            }}
            basePath="/api/admin/auth"
        >
            <Header />
            <main>
                {children}
            </main>
        </SessionProvider>
    )
}

layout.js

import * as React from 'react'
import TutorHeader from '../src/tutor_header'
import { SessionProvider } from 'next-auth/react'

export default function Layout({forceauth = false, children}) {
  return (
    <SessionProvider
        // Provider options are not required but can be useful in situations where
        // you have a short session maxAge time. Shown here with default values.
        options={{
            // Client Max Age controls how often the useSession in the client should
            // contact the server to sync the session state. Value in seconds.
            // e.g.
            // * 0  - Disabled (always use cache value)
            // * 60 - Sync session state with server if it's older than 60 seconds
            clientMaxAge: 0,
            // Keep Alive tells windows / tabs that are signed in to keep sending
            // a keep alive request (which extends the current session expiry) to
            // prevent sessions in open windows from expiring. Value in seconds.
            //
            // Note: If a session has expired when keep alive is triggered, all open
            // windows / tabs will be updated to reflect the user is signed out.
            keepAlive: 0,
            basePath: "/api/auth"
        }}
        basePath="/api/auth"
    >
      <TutorHeader/>
      <main>
          {children}
      </main>
    </SessionProvider>
  )
}

I am doing the authentication stuff in the Header components.

Thinking of the role approach, it seems to be a good one, but I want to make sure that user and admin sessions don't interfere with each other, and (possibly) have both admin and user sessions signed in at the same time. I'll think more about the role approach.

So, with the role approach, how can I pass the isAdmin variable to the client? It seems with JWT I can only pass email, name and image. Or did I understand this wrong?

[zakaryan2004]

Okay, I solved the part where I pass more stuff in JWT by adding the session callback which I missed

[balazsorban44]

You basically need role-based authentication (RBAC) on a per-page basis.

Give a read to this, and tell me what you think!:

https://simplernerd.com/next-auth-global-session