firebase‐email‐link‐authentication - sana028/VueLearningsPoc GitHub Wiki

To implement email link authentication in a Vue.js application after set up the firebase:

we need to Enable Email Link (passwordless sign-in) under the Email/Password provide in firebase sign-in method tab.

after enabling we can implement the email-link authentication.

we have three in-built functions to implement the email link authentication

1. sendSignInLinkToEmail : The sign-in operation has to always be completed in the app unlike other out of band email actions (password reset and email verifications). This is because, at the end of the flow, the user is expected to be signed in and their Auth state persisted within the app. we need to provide email verification url to this method it will add in sign-in email link

const signIn = async () => {

const actionCodeOptions = {

url: import.meta.env.VITE_WEBSITE_PATH + '/verify-email',

handleCodeInApp: true,

}

v$.value.$touch();

if (!v$.value.$invalid) { try {`

  `await sendSignInLinkToEmail(auth, emailAddress.value, actionCodeOptions);`

  `store.userEmail = emailAddress.value;`

  `localStorage.setItem('email', emailAddress.value)`

  `alert('Sign-in link sent! to your email')`

`} catch (error) {`

  `console.error(error);`

`}`

}

2.After sign-in email sent , click on link which is provided in email it will redirect to the url which you are provided at the time of sending email after that you need to verify the email

clicking on the verify email I will send the email which is provided initially with in another two built in methods from firebase

const verifyLogin=async()=>{

`const email = localStorage.getItem('email');`
  `if (isSignInWithEmailLink(auth, window.location.href)) {`
    `try {`
      `await signInWithEmailLink(auth, email, window.location.href);`
      `alert('Successfully signed in!');`
      `store.userEmail=email;`
      `localStorage.removeItem('email');`
      
      `router.push('/home/search'); // Redirect to the desired page`
    `} catch (error) {`
      `console.error('Error verifying email link:', error);`
    `}`
  `}`

}

isSignInWithEmailLink => This will checks if an incoming link is a sign-in with email link or not if not it will give an error.

signInWithEmailLink=>

   Asynchronously signs in using an email and sign-in email link.


   If no link is passed, the link is inferred from the current URL.

   Fails with an error if the email address is invalid or OTP in email link expires.

   This method is not supported by [Auth] instances created with a @firebase/app#FirebaseServerApp.