Email link authentication?

[JohnMarsden24]

Trying to set up an email link sign in flow and keep running into the issue when the request hits setAuthCookies in the /api/login endpoint. The request is coming from opening the link in the email and so of course authorization is missing from the header, which causes setAuthCookies to throw the error 'The request is missing an Authorization header value'.

import React, { useEffect, useState } from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase/app";
import "firebase/auth";

// Note that next-firebase-auth inits Firebase for us,
// so we don't need to.

const firebaseAuthConfig = {
  signInFlow: "popup",
  // Auth providers
  // https://github.com/firebase/firebaseui-web#configure-oauth-providers
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      requireDisplayName: false,
      emailLinkSignIn: function () {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: "http://localhost:3000/api/login",
          // Always true for email link sign-in.
          handleCodeInApp: true,
        };
      },
    },
  ],
  signInSuccessUrl: "/",
  credentialHelper: "none",
  callbacks: {
    // https://github.com/firebase/firebaseui-web#signinsuccesswithauthresultauthresult-redirecturl
    signInSuccessWithAuthResult: () => true,
  },
};

const FirebaseAuth = () => {
  // Do not SSR FirebaseUI, because it is not supported.
  // https://github.com/firebase/firebaseui-web/issues/213
  const [renderAuth, setRenderAuth] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      setRenderAuth(true);
    }
  }, []);
  return (
    <div>
      {renderAuth ? (
        <StyledFirebaseAuth
          uiConfig={firebaseAuthConfig}
          firebaseAuth={firebase.auth()}
        />
      ) : null}
      <div id="firebaseui-auth-container"></div>
    </div>
  );
};

export default FirebaseAuth;

Email link authentication with firebase

Any ideas?

[JohnMarsden24]

Fixed - thanks to this post I simply changed signInFlow to 'redirect' and everything works as expected.