18

I'm using firebase in my web app with Ionic and I would like to redirect the user to a specific page (the login page, in my case) after he clicks on the link in the verification email.
At the moment, when the user clicks on the verification link, he is redirected on another browser page that says that he has confirmed the email.

enter image description here

I would like to redirect him directly to a page of my web app, without passing through that confirmation.
Is it possible to do that?

1
  • Were you able to solve this issue? Thanks
    – Subhan
    Commented Jun 3, 2019 at 0:00

4 Answers 4

17

Yes it's possible. Look in the firebase.console on the left for "Authentication". Then find "Templates" and look for "Email address verification". I think it's default opened. On the template you will see a small pencil, click on it. After that you can change your template however you want. At the bottom you will find the link "customize action URL". Open this link, paste your URL in the modal window and save. That's it.

First Steps

Last Steps

5
  • Hi, thanks for the answer. The problem is that I'm currently developing the app locally, so I can't use a specific URL to redirect to my page, because all the pages are at localhost:8100. Is there a solution to this?
    – Usr
    Commented Nov 16, 2017 at 13:51
  • 1
    I think in the beginning you shouldn't focus on details like redirecting the user after email verficiation, that's just insert a URL and finish. But if you really want to, you can find any server and domainname for free, upload your project and insert a URL of the domain or server you're using.
    – Rasidre
    Commented Nov 16, 2017 at 14:03
  • 12
    @R.Rasco Would I have to manually verify the user's email in this case. It seems so. I think people are looking for a solution where firebase verifies the email automatically and then redirects to a page of their application
    – Swapnil
    Commented May 30, 2018 at 9:17
  • @Swapnil No, you don't have to. When the user clicks on the verification link, he approves him self and can use the application without any interaction of yours.
    – Rasidre
    Commented Feb 26, 2020 at 12:35
  • Don't work for me. Just getting the page that required verification (it showed when the email is not verify)
    – Luis
    Commented Dec 5, 2023 at 20:13
9

I couldn't get any of the solutions here to work. So after looking up the docs I found that you add a continue URL after the email verification to which the firebase will redirect to after confirming. https://firebase.google.com/docs/auth/web/passing-state-in-email-actions

After email is verified you might also have to force refresh the firebase token if you use email_verified in your firebase rules.

You can do what I did.

  1. Pass ActionCodeSettings to sendEmailVerification.
  auth.createUserWithEmailAndPassword(email, password)
  .then((res) => {
    res.user.sendEmailVerification({
      url: "https://example.com/path?confirm_email=true",
    });
    return createUser({ email, uid: res.user.uid, name });
  })

This will make firebase redirect to https://example.com/path?confirm_email=true after email verification. The confirm_email is so that I know when to force refresh the firebase token.

(Optional)

  1. Once redirected to the page you want you can check for the confirm_email param and force refresh the token accordingly.
const urlParams = new URLSearchParams(window.location.search);
const isConfirmingEmail = urlParams.get('confirm_email');


auth.currentUser.getIdToken(!!isConfirmingEmail).then(() => {
  // Refreshed Token
})
2
  • Works! This is exactly the solution I had been waiting for. Thanks! Commented Jun 20, 2021 at 11:01
  • While sending ActionCodeSettings is the solution by providing a 'continue' URL. Relying on query params (confirm_email here) to check the 'confirm email' status is a red flag since anyone can send that param in the URL. Instead use 'user.emailVerified' on the client side to check if the email has been verified. Commented Jun 20, 2021 at 11:06
2

You cannot have Firebase do a Authenticate then redirect unfortunately. The currently accepted answer on this is half-way there. By going into "Firebase -> Authentication -> Templates -> Email Address Verification -> Edit (aka. Pencil button)". You can then click on "Customize action URL" and insert any URL you want here.

Please note this URL you enter will not redirect you to the page after performing an email verification. All it will do is instead of generating the link <firebase email verification link>?mode=verifyEmail&oobCode=<code> it will instead direct you to <link you put in>?mode=verifyEmail&oobCode=<code>. Meaning that when a user lands on this page you will have to then handle the email verification yourself. Which means parsing out the query params, and sending this information along to Firebase in the back-end to verify the email in question. See the following for a potential on how to verify the email address: https://firebase.google.com/docs/reference/rest/auth#section-confirm-email-verification

More information about this can be found here: https://support.google.com/firebase/answer/7000714

1

Here is my code that helped me. I am only providing you necessary code that you need You have to fill rest of the code by yourself.

Firebase v9 example

import React from "react";
import {
  createUserWithEmailAndPassword,
  sendEmailVerification
} from "@firebase/auth";
import {useHistory} from "react-router-dom"

export default function SignUp() {
  const history = useHistory()
  async function submit(e) {
    e.preventDefault() // Prevent default.

    // Sign your user using createUserWithEmailAndPassword

    // Provide user's email and password
    await createUserWithEmailAndPassword(email, password);

    // Send verification email.
    await sendEmailVerification(userCredentials.user);

    let interval = setInterval(async() => {
      if (userCredentials.user.emailVerified) {
        clearInterval(interval);
        history.push("/desired-link");
      }
      await userCredentials.user.reload();
    }, 2000);
  }
  return < > { /* your sign up form */ } < />;
}

Firebase v8 code:

import React from "react";
import firebase from "firebase"
import {useHistory} from "react-router-dom"

export default function SignUp() {
    const history = useHistory()
    async function submit(e) {
        e.preventDefault() // Prevent default.
        
        // Sign your user using createUserWithEmailAndPassword
        
        // Provide user's email and password
        let userCredentials = await firebase.auth.createUserWithEmailAndPassword(email, password);

        // Send verification email.
        await userCredentials.user.sendEmailVerification()

        let interval = setInterval(async () => {
            if (userCredentials.user.emailVerified) {
                clearInterval(interval);
                history.push("/desired-link");
            }
           await  userCredentials.user.reload();
        }, 2000);
    }
    return <>{/* your sign up form */}</>;
}

As soon as user clicks the verification link, he will find your webpage redirects to <domain.name>/desired-link.

However, a bonus tip for you... Do not manipulate the action url. It's because by doing that, firebase.auth.currentUser.emailVerified will always return false. Meaning, user email would never be verified. It's because this action URL is responsible for email verification. So, instead of doing that, follow my example. This works for both localhost and your custom domain.

1
  • 1
    Great solution! Though I think the v9 reload should be reload(user). And maybe you missed the await?
    – CSSer
    Commented Nov 17, 2021 at 4:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.