Firebase - Sign In With Email Link Returns Error 400

Question

Hopefully the wizards of this site can help. There are a lot of similar questions, but the names and specifics of Firebase methods change often, so I thought I'd ask. In my case, I'm hosting my site on a Firebase Hosting URL and I am trying to implement a sign in method using an email link. I am copying the code a la the documentation: https://firebase.google.com/docs/auth/web/email-link-auth

When I try to test this out, an error message appears on my console:

POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/getOobConfirmationCode?key=//string-of-characters-and-numbers 400

My code:

import firebase from "firebase"

function SignInWithEmailLink() {

    var actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be whitelisted in the Firebase Console.
        url: 'https://myurl.web.app/',
        // This must be true.
        handleCodeInApp: true,
        iOS: {
            bundleId: 'com.example.ios'
        },
        android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
        },
        dynamicLinkDomain: 'https://myurl.web.app/'
    };

    function sendEmail() {
        var email = document.getElementById("userEmail").value
        firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
            .then(function () {
                // The link was successfully sent. Inform the user.
                // Save the email locally so you don't need to ask the user for it again
                // if they open the link on the same device.
                window.localStorage.setItem('emailForSignIn', email);
                window.alert("Sending email link!")
            })
            .catch(function (error) {
                // Some error occurred, you can inspect the code: error.code
                window.alert("An error occurred...")
            });

   return (
                <div>
                    <form>
                        <input type="text" id="userEmail" />
                        <button type="button" onClick={() => sendEmail()}>Send Email Link</button>
                    </form>
                </div>
)

And yes, I am running the Firebase initialization snippet on my index.html.

A 400 error I believe means that the page can't be found. I take this to mean that the google verification page can't be found, although I thought it could mean that my own URL wasn't being found, so I did try changing the redirect URL. I've already done some workshopping just getting the email input to save. I've also just verified my Google Admin to make sure that wasn't the issue.

Also, being that the catch(error) is in fact triggered, I know that the firebase.auth() is being read, even if not properly.

Perhaps you all will see how easy it really is? Any advice would be appreciated. I will include more code if you like but I think this is all that's relevant.

404 is "not found". 400 is "bad request", which normally indicates you did something wrong. — Doug Stevenson
dynamicLinkDomain is a domain and not a full URL. Also why are you using the same URL for dynamicLinkDomain and url in your ActionCodeSettings? — bojeil

Jesse Falcon-Musik Jesse Falcon-Musik · Accepted Answer · 2020-05-04T18:40:52

After console logging some errors, the problem became obvious. My input for the dynamicLinkDomain was not supported. After commenting it out, the error went away. Granted I will have to set the dynamicLinkDomain eventually, but I'll cross that bridge later.

Firebase - Sign In With Email Link Returns Error 400

1 Answers