AuthCheck emailVerified check - Feature Request

[dannybarinshtein]

Would be great to have the ability to add a check for User email verification to the AuthCheckout wrapper (and potentially custom checks if use cases arise?).

Goal:

Avoid rendering App Routes and force the Auth Routes to remain if email verification is required.

Proposed Solution:

A simple prop would suffice I believe

<AuthCheck fallback={<AuthRoutes />} emailVerified>
     <AppRoutes />
</AuthCheck>

If use cases arise could be neat adding a callback for additional checks (not sure what a good name prop would be)

<AuthCheck 
    fallback={<AuthRoutes />} 
    emailVerified 
    additionalCheck={ () => CONDITION }
>
     <AppRoutes />
</AuthCheck>

Additional Notes:

The emailVerified prop would have to consider not only the initial rendering of the App but also custom email verification handlers that will reload the user within ReactFire and update the UI accordingly.

Proposed Addition:

An implementation of a useVerifyEmail hook - something along the lines of:

export default () => {
  const auth = useAuth()
  const user = useUser()

  return useCallback(
    async oobCode => {
      // Verifies Email based on custom oobCode
      await auth.applyActionCode(oobCode)

      // Since firebase auth persists logged in state by default, it is highly likely that a user will be redirected back to the app while still logged in.

      if (user) {
        // If the user is still logged in the user will need to be reloaded for two main reasons:

        // 1. The emailVerified prop will need to be changed so that the UI can rerender
        // 2. Without the reload the server will not pickup on the verification until the user logs out / logs in again - causing any security rules that require the email to be verified to not be allowed
        
        await user.getIdToken(true)
        await user.reload()
      }
    },
    [auth, user]
  )
}

As it currently stands there is a behaviour I don't quite seem to understand happening with the proposed hook above. The journey looks like this:

1. User registers and receives a custom verification email
2. The user is redirected to verification URL (while still logged into the app)
3. Verification process completes - 2 console log statements are added one under the other

const user = useUser()

// returns a user object with emailVerified value being true
console.log(user)

// returns false
console.log(user.emailVerified)
`

I believe that this would need to be looked at / sorted in order for both the hook as well as the AuthCheck emailVerified addition to render properly

[devth]

I came here looking for the same thing. Would be great to get verified updates from useUser calls.

[adamfarmer0]

In your AuthCheck, you can use const {data: user} = useUser(); and check if(user.emailVerified), If so, you can return to fallback or children or any other component. Check out the AuthWrapper component from the examples.