Attempt to implement a "Verify your email" step after manual registration

Help
, , ,
1

For the past few days I’ve been trying to implement a step after a user has done their first time registration. The step would be to notify the user to verify their email by clicking the link in the email that they just received. But I’m struggling with catching the first login, that obviously fails because they haven’t verified their email yet.

I’ve tried implementing logic into the post-registration flow, login flow, and also have been trying to catch anything client-side, but all of those have failed.

For the client-side attempt I’ve tried the following redirect on my Sign Up button (I have an unprotected page /verify-email that is accessible to non-authed users):

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { Button } from "@mui/material";

const SignUpButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <Button variant="contained" onClick={() => loginWithRedirect({
    screen_hint: 'signup',
    appState: {
      returnTo: "/verify-email",
    },
  })}>Sign Up</Button>;
};

export default SignUpButton;

I’ve also tried applying this rule, to no avail. Also been trying to translate this rule into a Flow Action, but it doesn’t seem to work the same way:

function emailVerified(user, context, callback) {
  if (!user.email_verified) {
    return callback(new UnauthorizedError('Please verify your email before logging in.'));
  } else {
    return callback(null, user, context);
  }
}

Can someone point me in the right direction, using Flows or client-side logic, to achieve the desired UX behavior?

Additionally, when I try all of the above, mainly the redirect using loginWithRedirect(), the return URL after registration contains the following params:

http://localhost:3000/?error=access_denied&error_description=Access%20to%20%22APP_NAME%22%20has%20been%20denied%20due%20to%20non-verified%20email%20to%20%22USERNAME%22.&state=SjZPS2c5cUNudUp2RzFjdG5RU0VudVZaflpzeF9hcUEycDRWSC5jYVFkQw%3D%3D