Correct way to logout with SSR

[ahetawal-p]

On our index page I have a top menu which hosts the Sign Out button.
The onClick of Sign Out looks like this.

const router = useRouter()
const signOut = async () => {
    await authUser.signOut()
    router.reload()
  }

I expected this to change my index page context, on the router.reload of the page. But at this time I still the authUser.id being present even after reload.
The page only works correctly when I click a manual refresh on browser.

export const getServerSideProps = withAuthUserTokenSSR()(async context => {
  let isAuthenticated = false
  const authUser = context.AuthUser
  if (authUser.id) {
    console.log(authUser.id)
    isAuthenticated = true
  }
return {
    props: {
      isAuthenticated,
    },
  }
}

How can I reflect the correct logout state to my SSR page for updating the UI for a guest user?

[kmjennison]

I think what's happening here is the request to unset the auth cookies is not completing before you reload the page. The signOut method signs out the user on on the Firebase JS SDK but it does not await the "logout" API request. (This might be a good change for us to make to the signOut method.)

Would it work for you to use the whenUnauthedAfterInit and whenUnauthed options to handle redirects to the login page? See:

• Demo page: https://nfa-example.vercel.app/ssr-auth-required
• Source code: https://github.com/gladly-team/next-firebase-auth/tree/main/example

These might not do what you need if reloading the current page is the necessary app behavior.

[ahetawal-p]

Thanks @kmjennison you are right this is what I am seeing when I put some log statements in logout api endpoint, it seems be called after the actual reload has already happened.
I would have expected the sign out to wait for the api call to complete.
I was trying to control the user auth status completely on the server side (passing down isAuth flag) but at this I would need to have a mix of client and server side, since the sign out doesn't reflect the server side accurately.

Would be great if we can fix this ...

[kmjennison]

@ahetawal-p Thanks for the confirmation. I opened an issue to address this: #557

As another workaround for now, you can set your own handler for when the Firebase ID token changes and then refresh when the request is complete:
https://github.com/gladly-team/next-firebase-auth#tokenchangedhandler

[ahetawal-p]

Thank you, I will take a look at the above suggestion.