Checking for Authentication before rendering page

[marcmll]

Hey there,

I am currently trying to verify if a user is logged in before a page is loaded, and was wondering if there is a best practice for achieving this. As of now I am trying to verify if a user is logged in within the getServerSideProps as follows:

export const getServerSideProps = async ({ req, res }) => {
  // Check if user logged in, else redirect to /auth
  if (!(req.session && req.session.grant)) res.redirect('/auth')

  // Get current user data
  const firestoreUser = await db.collection('users').doc(req.session.grant.response.profile.identity.id.toString()).get()

  return {
    props: {
      user: firestoreUser.data()
    }
  }
}

This way, in case the user is logged in, I can get the relevant user data before the page loads directly from the database.

Using my current method, I encounter the following error whenever a session is not found:

TypeError: Cannot read property 'response' of undefined

refering to the req.session.grant.response.profile.identity.id line which comes after the redirect should have already occured.

When trying to avoid this error by calling return res.redirect('/auth'), I receive a different error:

TypeError: Cannot convert undefined or null to object

which seems to refer to the getServerSideProps function expecting the props Object as a return.

What would be the best way of going about the verification of a users logged in state, without having a page flash and still having a secure way of receiving the users data in case the required session is present.
Also, is this even a smart way of going about the retrieval of user data, or should this happen within the custom server?

[eatrocks]

Hi @marcmll, I'm not an expert in this area but I'm attempting to do a similar thing and thought I'd try to help. Here is what I found... first, I don't think res.redirect(...) causes execution to stop like you are thinking. You probably should guard any code you don't want to run in that case. Second, I found this discussion on redirecting from getServerSideProps which may be helpful, specifically the 3 lines of code they are using to cause the redirect which are slightly different from what you have.

[marcmll]

Hey @eatrocks, thanks so much for the reply!

The discussion you linked is very interesting, and the workaround specified in the thread does solve the issue whilst not causing any errors:

if (!(req.session && req.session.grant)) {
    res.setHeader('location', '/auth')
    res.statusCode = 302
    res.end()
    return { props: {} }
}

It seems that returning the expected format is the difference maker I needed, but it's also good to know that using the setHeader function, followed by the res.end() makes the code more secure in comparison to using res.redirect(...).

I really hope that a future version of Next.js has a redirect built into the getServerSideProps return, as discussed in the thread you linked. It would definitely make things a lot cleaner.

What is your current method for achieving the said redirect in case of a specific condition?

[jensmeindertsma]

Hey @marcmll !
What about rendering a temporary Loading... state before deciding whether to redirect or render the authenticated page? Like this:

const Page = () => {
  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState(null);
  const router = useRouter();

  useEffect(async () => {
    const response = await fetch('api/user');

    const data = await response.json();

    setUser(data.user);
    setLoading(false);
  }, []);

  useEffect(() => {
    if (loading === false && user?.signedIn === false) {
      router.push('/signin');
    }
  }, [loading, user]);

  if (loading === true) {
    // This shows while the user is being fetched
    return <> Loading... </>
  }

  if (user?.signedIn === false) {
    // Shows briefly before useEffect 
    // that redirects user gets triggered
    return <> Please sign in </>
  }

  // This only renders when the user is signed in
  return <> Hello {
    user.name
  } </>
}

[enricoschaaf]

I would go with client side a redirect as well, you can check of the auth examples, nearly all of them use a useAuth hook, that basically checks if the user is logged in otherwise it redirects.

[marcmll]

@jensmeindertsma @enricoschaaf thank you both for the suggestions! Client-side definitely seems to be the way to go about things...