Admin page

[gr-qft]

** Question **
How to implement admin authentication along the usual authentication?

** Description **
I would like to allow users to sign in using one of the providers (GitHub etc.). But I also want an admin page for my own site, where only a few people with admin privilege have access to. I'm not sure about the best way to go about it with NextAuth.

A more general question: Is it possible with NextAuth to have two sign in places, where one uses a provider (like GitHub etc.) and the other one uses Credentials (for admin)?

Feedback

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

Thank you!

[gr-qft]

Any comments on my question?

Thanks!

[gokalpdev]

I got stuck at the same position and the only solution I found was to put an if block before returning the protected content.

I have been playing with the example code of next-auth if you are confused about the code below.
https://github.com/nextauthjs/next-auth-example/blob/main/pages/protected.js

Everything else I tried failed because the session object returns undefined unless someone logs in. Only after someone logs in you get to access the obj params and only then you can check if the user is eligible to see the page or not.

import { useState, useEffect } from 'react'
import { useSession } from 'next-auth/client'
import Layout from '../components/layout'
import AccessDenied from '../components/access-denied'

export default function Page () {
  const [ session, loading ] = useSession()
  const [ content , setContent ] = useState()

  // Fetch content from protected route
  useEffect(()=>{
    const fetchData = async () => {
      const res = await fetch('/api/examples/protected')
      const json = await res.json()
      if (json.content) { setContent(json.content) }
    }
    fetchData()
  },[session])

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }

  // If session exists but the User is wrong, display the error message
  if (session.user.email!="[email protected]") { return <Layout>You are not authorized to see this page.</Layout> }

  return (
    <Layout>
      <h1>Protected Page</h1>
      <p><strong>{content}</strong></p>
    </Layout>
  )
}

I hope this helps.

[gokalpdev]

https://github.com/nextauthjs/next-auth-example/blob/main/pages/api/examples/protected.js
Probably a better idea to do this also:

// This is an example of to protect an API route
import { getSession } from 'next-auth/client'

export default async (req, res) => {
  const session = await getSession({ req })
  if (session && session.user.email=="yourEmail") {
        res.send({ content: 'Welcome ' + session.user.name + '(admin)'})
  } 
    else if(session) {
    res.send({ content: 'You are signed in ' + session.user.name  })
  }

    else {
    res.send({ content: 'You must be sign in to view the protected content on this page.' })
  }
}

[iamhimanshusrivastava]

Thank you! I have been searching here and there. But finally it's your solution which worked for me.