Firebase authentication link for email sign-in in Angularfire is invalid

Currently, I am utilizing the signInWithEmailLink wrapper from AngularFire for Firebase authentication. Despite providing a valid email address and return URL as arguments, an error is being thrown stating "Invalid email link!" without even initiating any network request to Firebase. It seems like the issue lies with the second argument of the method which is expected to be a string. I am unable to pinpoint what could be going wrong in this scenario.

Here's an example:

// signInWithEmailLink(emailAddress: string, emailLink: string)
this.auth.signInWithEmailLink('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147075627154716c75796478713a777b79">[email protected]</a>', 'https://my-app/email-link-return');

Unfortunately, there is no specific documentation about this method in AngularFire. While it is recommended to refer to Firebase docs for each wrapped method, the arguments listed in the Firebase docs for the same method are quite different. Has anyone encountered and resolved this issue?

angulartypescriptfirebaseangularfire

Answer №1

Uncertain if you're confirming the link as a sign-in URL, here's how to validate it.

if (this.auth.isSignInWithEmailLink(url)) {
  let email = window.localStorage.getItem('emailToSignIn');
  
  if (!email) {
    email = window.prompt('Please provide your email for confirmation');
  }

  const result = await this.auth.signInWithEmailLink(email, url);
  window.localStorage.removeItem('emailToSignIn');
}

If this doesn't resolve the issue, kindly update your query with detailed error information. Common errors could be expired or already used links, but additional details from the console can assist in debugging.

Answer №2

Upon carefully reviewing @Dharmaraj's response, it dawned on me that I had been employing the incorrect method. Instead of using signInWithEmailLink, I should have been utilizing sendSignInLinkToEmail. Sharing this realization here in case anyone else finds themselves in a similar silly predicament.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why do we often encounter a "SyntaxError: Unexpected token ;" error when a seemingly normal semicolon is present in distribution files?

Currently, I am in the process of developing a newsletter subscription API using node.js and typescript. This project involves my first experience with typeorm and PostgreSQL. Following several tutorials, I configured typeorm and created the entity types a ...

typescripttypeorm

Is there a way to host an AngularJS 2 application without needing to serve all the files in the `node_modules` directory as well?

Struggling to get the Angular 2 seed application up and running. Upon using npm install, a plethora of files are placed into node_modules that seem excessive for what is necessary to serve alongside the seed application code. Is there a way to only serve ...

angulargoogle-app-enginenpm

The data type 'string | boolean | null' cannot be assigned to type 'boolean'. Specifically, the type 'null' cannot be assigned to type 'boolean'

Can you spot the issue in this code snippet? isAuthenticated(): boolean { var token = localStorage.getItem(ACCESS_TOKEN_KEY); return token && !this.jwtHelper.isTokenExpired(token); } Error: The variable is returning a type of 'string | bo ...

typescript

The type 'Observable<any>' cannot be assigned to the type 'Observable<T>'

Here is the code I am working with: import {HttpClient} from '@ngular/common/http'; private httpClient: HttpClient; do_request(method: string, url: string, ...

angularjstypescriptrxjs

Dealing with router parameters of an indefinite number in Angular 5: A comprehensive guide

Is there a method to efficiently handle an unknown number of router parameters in a recursive manner? For instance: We are dealing with product categories that may have subcategories, which can have their own subcategories and so on. There are a few key ...

javascriptangulartypescriptangular-ui-routerfrontend

The Angular component fails to retrieve data from a subscribed service when the data is being fetched from the sessionStorage

Within my Angular application, there exists a service that handles incoming objects by adding them to a list of objects, then saving the updated array to sessionStorage. This service also sends the updated list to another application that is subscribed to ...

javascriptangularsession-storage

Develop a FormGroup through the implementation of a reusable component structure

I am in need of creating multiple FormGroups with the same definition. To achieve this, I have set up a constant variable with the following structure: export const predefinedFormGroup = { 'field1': new FormControl(null, [Validators.required]) ...

angulartypescript

Tips for resolving the undefined error in TypeScript and React

Hey, I have this code snippet below which includes a call to the isSomeFunction method that returns true or false. However, there are times when the argument can be undefined. I only want to execute this function if selectedItems is not undefined. How can ...

typescript

Exploring techniques to retrieve data from Json Array in Angular using Firebase documentation

this.currentUser$=this.afs.doc('users/'+this.authState.uid).valueChanges().pipe(); When I include it in my component.html file like this: {{ currentUser$|async|json}} The output I get is as follows: { "photoUrl": "", &qu ...

angulartypescriptangularfire

Is there a way to stop the Firebase web client from altering the error message generated by an https.onRequest function?

I am facing an issue where I cannot retrieve the original message I sent from an "https.onRequest" function in Firebase. The firebase client is rewriting the message based on the error code, making it difficult for me to recover the originally sent body or ...

javascriptfirebasegoogle-cloud-functions

Using the Moment library in a NestJS application

I am integrating momentjs into my nestjs application and I want to ensure that my services can be tested effectively. To achieve this, I have included momentjs in my module setup as shown below: providers: [ { provide: 'MomentWrapper', ...

javascriptnode.jstypescriptmomentjsnestjs

I'm encountering difficulty accessing the Index value within the template's Ref

I'm having trouble accessing the index value inside the templateRef. It shows as undefined in the console. <ng-container *ngFor="let notification of notifications; let i = index"> <ng-template *ngTemplateOutlet="notificationPage ...

javascriptangulartypescript

Toggle visibility of an Angular 4 component based on the current route

Hello there, I'm facing an issue and not sure if it's possible to resolve. Essentially, I am looking to display a component only when the route matches a certain condition, and hide another component when the route matches a different condition. ...

javascriptangulartypescript

Intercontinental partnership bridging two separate entities

Within my application, there is a primary module: app.component.html <h1>{{globals.title}}</h1> <router-outlet></router-outlet> In app.module.ts @NgModule({ imports: [ BrowserModule, HomeModule, NotesModule, ...

angular

Passing an array of objects as properties in React components

My functional component looks like this: function ItemList({ items }: ItemProps[]) { return <p>items[0].name</p> } Here is how I'm creating it: <ItemList items={items} /> The array items contains objects in the format [{name: &ap ...

javascriptreactjstypescript

`Is There a Solution When Compilation Fails?`

I keep encountering an issue when I run the command npm start. The problem seems to be originating from PancakeSwap Frontend and after several attempts, I am still unable to resolve it. Your assistance is greatly appreciated :) Below is a snippet of my Ap ...

node.jstypescriptforktrufflenpm-start

What is the best way to obtain an attribute name that is reminiscent of Function.name?

My objective is to securely type an attribute. For example, I have an object: const identity = { address: "Jackie" }; At some point, I will rename the address key to something else, like street_address. This is how it is currently implemented ...

javascriptreactjstypescript

Identifying when an element is in or out of view using Next.js and TypeScript

I'm currently working on an app using Next and Typescript. The app features a navigation bar at the top of the screen, and I need it to change its style once it reaches a certain point in the view. I attempted to use jQuery for this purpose, but encou ...

jquerytypescriptnext.js

Personalizing the predefined title bar outline of the input text field

The outline color of the title in the input textbox appears differently in Google Chrome, and the bottom border line looks different as well. <input type="text" title="Please fill out this field."> https://i.stack.imgur.com/iJwPp.png To address th ...

htmlcssangulartypescript

Organizing a store in a hierarchical structure

I am currently facing an issue with creating a hierarchical store in Angular. My goal is to have multiple reducers that work on specific parts of the application. Here's the scenario: I am working on an HR application that has a talent (employee) mod ...

angularngrx