Challenges

Create a Dashboard

Show a message if there is no user

Our create post page is a static page. It doesn't have getServerSideProps. In cases like this, we can render a message rather than doing a redirect.

Showing a message if the user has no access to the content.

Here's how to do this. Open the pages/dashboard/post/create.js page & apply following changes.

First, import useSession with:

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

Then invoke the above useSession hook inside the CreatePost React component using:

const [session, loading] = useSession()

Finally, add the following if code blocks on the top of your component:

if (loading) {
  return 'loading...'
}

if (!session) {
  return (
    <Theme>
      <div className="dashboard">
        <p>
          You are not allowed to visit this page.
        </p>
        <p>
          Visit the <Link href="/"><a>homepage</a></Link>
        </p>
      </div>
    </Theme>
  )
}

That's it.

(Here's the final version of the file after all these changes.)

Now we are rendering a loading screen while the authentication is happening. Then if there's no such session, we will show a message asking the user to redirect.

Q: Is this a viable solution for you?
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: