Possible to use email links?

[maerzhase]

I was wondering if it is at all possible to make a signin with email links. I successfully added the email link provider to the FirebaseAuth and I am also receiving the link via email. But when the link is opened the user is never authenticated. I couldn't find any explanation on how it should work or if it is considered a feature at all?!

Reproducable example code

I've created a fork with a reproducable example. You can basically test the email link sign in with the next-firebase-auth example code:

https://github.com/maerzhase/next-firebase-auth/tree/firebase-email-link-auth

[shreyas-jadhav]

Only thing I could suggest is to recheck if you are exporting the component with withAuthUser()

[maerzhase]

Yeah the page is wrapped. Any other authentication method actually works.

[kmjennison]

You can try double-checking:

• Your page is wrapped in withAuthUser. Otherwise, useAuthUser won't work properly.
• The Firebase JS SDK has an authenticated user. (Note that this module is not responsible for handling the actual login process with Firebase—it simply uses Firebase auth state.)

Others might be able to help if you share a minimal code base that demonstrates your problem.

[maerzhase]

Yeah the page is wrapped. Any other authentication method actually works. I will setup an example environment

[maerzhase]

I've created a fork of next-firebase-auth and modified the example on this branch to add the email link sign-in option:
https://github.com/maerzhase/next-firebase-auth/tree/firebase-email-link-auth

Here is the code of the provider.

https://github.com/maerzhase/next-firebase-auth/blob/15c21f2a75e59578ab8e0681ac4761dcf7421e45/example/components/FirebaseAuth.js#L7-L43

[w121211]

Same problem here, example code with email link sign in provider, the app continue to identify the user is not signed in after the email link was clicked

[KeisukeNagakawa]

I have the same issue. I suppose solution lies in here: https://firebase.google.com/docs/auth/web/email-link-auth#complete_sign_in_with_the_email_link

[KeisukeNagakawa]

I solved this issue.

First, in auth.tsx, get current url as follows:

  const router = useRouter()

  const q = router.query
  // ?key1=value1&key2=value2
  // if no param, it becomes ""
  const paramStr =
    "?" +
    Object.keys(q)
      .map((q_key) => q_key + "=" + q[q_key])
      .join("&")

Then authenticate.

const url = getAbsoluteURL(router.pathname + paramStr)

  if (isSignInWithEmailLink(auth, url)) {
    // Additional state parameters can also be passed via URL.
    // This can be used to continue the user's intended action before triggering
    // the sign-in operation.
    // Get the email if available. This should be available if the user completes
    // the flow on the same device where they started it.
    let email = window.localStorage.getItem("emailForSignIn")
    if (!email) {
      // User opened the link on a different device. To prevent session fixation
      // attacks, ask the user to provide the associated email again. For example:
      email = window.prompt("Please provide your email for confirmation")
    }
    // The client SDK will parse the code from the link for you.
    signInWithEmailLink(auth, "kay@example.com", url) # tobe changed
      .then((result) => {
        // Clear email from storage.
        window.localStorage.removeItem("emailForSignIn")
        // You can access the new user via result.user
        // Additional user info profile not available via:
        // result.additionalUserInfo.profile == null
        // You can check if the user is new or existing:
        // result.additionalUserInfo.isNewUser
      })
      .catch((error) => {
        // Some error occurred, you can inspect the code: error.code
        // Common errors could be invalid email and invalid or expired OTPs.
      })
  }