How to redirect users back to auth page if email is not verified?

[burstWizard]

Firstly, thanks for making next-firebase-auth. Its making authentication for my web app way easier.

I want to redirect users back to the auth page if they aren't logged in or if their email isn't verified. I only want users with verified emails to be able to use the web app at all. All others should be redirected to the auth page.

I know I can use AuthActions to redirect users that aren't logged on, but how can I redirect users who don't have verified emails?

[burstWizard]

I solved it, and its a lot easier than I thought it would be.

To redirect users who haven't logged in, I just use AuthActions and withAuthUser, as described by the documentation.

To redirect users who have logged in or signed up, but don't have a verified email, I've put in this block of code:

if(AuthUser.id && !AuthUser.emailVerified){
        router.push("/verify")
        return <Loading />
}

It's not wrapped in a useEffect or anything, it's just inside the function component. I return the Loading component because router.push takes a little time, and the page will render if you don't return anything.

This works fine, but it would be really cool to be able to do this by just using next-firebase-auth. Maybe we could be allowed to customize when whenAuthed is actually true, so we can say that whenAuthed is only true if firebase has initialized, the user is logged in, and their email is verified, or whatever other condition.

[nmalancea]

a custom HOC which includes withAuthUser

@kmjennison would you mind providing a snippet of what that would look like?

[nmalancea]

@kmjennison does this look right?

import {
  AuthAction,
  PageURL,
  useAuthUser,
  withAuthUser,
} from 'next-firebase-auth'
import React, { ComponentType, FC, useEffect } from 'react'
import hoistNonReactStatics from 'hoist-non-react-statics'
import { useRouter } from 'next/router'

/** From next-firebase-auth `withAuthUser` */
interface WithAuthUserOptions {
  whenAuthed?: AuthAction.RENDER | AuthAction.REDIRECT_TO_APP
  whenAuthedBeforeRedirect?:
    | AuthAction.RENDER
    | AuthAction.SHOW_LOADER
    | AuthAction.RETURN_NULL
  whenUnauthedBeforeInit?:
    | AuthAction.RENDER
    | AuthAction.REDIRECT_TO_LOGIN
    | AuthAction.SHOW_LOADER
    | AuthAction.RETURN_NULL
  whenUnauthedAfterInit?: AuthAction.RENDER | AuthAction.REDIRECT_TO_LOGIN
  appPageURL?: PageURL
  authPageURL?: PageURL
  LoaderComponent?: ComponentType | null
}

/**
 * Check if the user's email has been verified.
 */
const withVerifiedAuthUser =
  <P extends object>(options?: WithAuthUserOptions) =>
  (ChildComponent: ComponentType<P>) => {
    const WithVerifiedAuthUserHOC: FC<unknown> = (props) => {
      const AuthUser = useAuthUser()
      const router = useRouter()
      useEffect(() => {
        if (!!AuthUser.id && !AuthUser.emailVerified) {
          router.replace('/verify')
        }
      }, [router, AuthUser])
      return <ChildComponent {...(props as P)} />
    }

    WithVerifiedAuthUserHOC.displayName = 'WithAuthUserHOC'
    hoistNonReactStatics(WithVerifiedAuthUserHOC, ChildComponent)
    return withAuthUser()(WithVerifiedAuthUserHOC)
  }

export default withVerifiedAuthUser

[kmjennison]

@nmalancea Yes, that looks right.

[fanismahmalat]

in my case, this does not work. I need to redirect away from /login whenAuthed but this case falls also just when the user clicks sign in (still not authed) and then turns to authed state. then next-firebase-auth redirects to AuthAction.REDIRECT_TO_APP but i wanted to redirect to a redirectURI from the params. any idea for this scenario @kmjennison ?

[kmjennison]

@fanismahmalat You could use AuthAction.RENDER specifically on that page to make next-firebase-auth take no action on auth change, then handle the redirect yourself.