Challenges

Add Social Authentication

Show Login State

We don't have any information about the login state in the client-side app. Let's make it possible to login and logout from the UI like this:

First of all, create a file called pages/_app.js and add this code:

import { Provider } from 'next-auth/client'

export default function App({ Component, pageProps }) {
    return (
        <Provider>
            <Component {...pageProps} />
        </Provider>
    )
}
šŸ’” Here it uses Next.js custom app to create an environment for the login system. For now, don't overthink this. We will talk about the custom app in a later lesson.

Then, replace the content of components/Header.js with the following:

import Link from 'next/link'
import { useSession, signIn, signOut } from 'next-auth/client'

export default function Header () {
  const [session] = useSession()

  const handleLogin = (e) => {
    e.preventDefault()
    signIn('github')
  }

  const handleLogout = (e) => {
    e.preventDefault()
    signOut()
  }

  return (
    <div className='header'>
      <Link href='/'>
        <a className='title'>My Blog</a>
      </Link>
      <div className="user-info">
        {session? (
          <>
            <img src={session.user.image} className="user"/>
            <a href="#" onClick={handleLogout} className="logout">Logout</a>
          </>
        ) : (
          <a href="#" onClick={handleLogin} className="logout">Login</a>
        )}
      </div>
    </div>
  )
}

Now restart your app with yarn dev and verify this functionality.

As you can see, it will show the Login/Logout options & it shows the avatar of the user as well.

To get the current user's session, we use the useSession react hook. Based on that, we can render login/logout information.


Before we jump to the next step, could you add the following line inside our Header component located inside components/Header.js?
(It will log the current session to the browser console.)

console.log('SESSION', session)

Then open the browser console & inspect it:

Q: Which of the following is false based on your experience?
authenticating...

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: