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

The VSCode's intellisense for Angular Material fails to function effectively

In the midst of my project on Angular version 13, I have successfully installed Angular Material using the command below: ng add @angular/material The package has been properly included in the node_modules folder. However, when working with TypeScript ...

angulartypescriptvisual-studio-codeangular-material

Angular application hosted on S3, utilizing Route53 for DNS routing and personalized customization based on query strings

I have a web application built with Angular that is currently hosted on AWS S3. The visual appearance of my application varies depending on the client query string. www.example.com?client=test1 www.example.com?client=test2 My goal now is to set up a new ...

angularamazon-web-servicesamazon-s3dnsamazon-route53

Unknown error occurred in Eventstore: Unable to identify the BadRequest issue

I'm encountering an error while using Eventstore, specifically: Could not recognize BadRequest; The error message is originating from: game process tick failed UnknownError: Could not recognize BadRequest at unpackToCommandError (\node_modul ...

javascripttypescripteventsevent-handling

You cannot assign void to a parameter expecting a function with no return value

I have been working on an angular application that was initially developed in Angular 2, then upgraded to versions 7 and 9, and now I'm attempting to migrate it to Angular 11. There is a function in my code that fetches the notification count for the ...

angulartypescriptsocket.io

Leveraging an external Typescript function within Angular's HTML markup

I have a TypeScript utility class called myUtils.ts in the following format: export class MyUtils { static doSomething(input: string) { // perform some action } } To utilize this method in my component's HTML, I have imported the class into m ...

htmlangulartypescriptcomponents

Implement Angular and RxJS functions sequentially

this.functionalityClient.activateFeature(featureName) .pipe( concatMap( feature => { this.feature = feature; return this.functionalityClient.setStatus(this.feature.id, 'activated'); } ), con ...

angulartypescriptrxjs

Dealing with custom path problems in Angular 2+ webpack configurations

I am interested in using the @ngneat/tailwind schematics to convert an Angular project into one with a custom webpack configuration. However, after adding this, my scss import paths for fonts and other partial scss files are not resolving, resulting in th ...

angularwebpackangular-schematics

The input field cannot accommodate the lengthy value in the Mat Select option

When a user selects a value in my mat select, it doesn't display well in the selection box. The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. Th ...

htmlcssangulartypescript

Function that sets object properties based on specified keys and verifies the value

Let's consider a scenario where we have an object structured like this: interface Test{ a: number; b: string; c: boolean; } const obj:Test = { a: 1, b: '1', c: true, } We aim to create a function that can modify the value ...

typescript

Using the hook to implement the useContext function in React

I came across this definition export interface user{ email:string name:string last_name:string } export type UserType= { user: user; setUser:(user:user) => void; } const [user,setUser] = useState <user> ({ email ...

reactjstypescriptreact-hooks

I'm having trouble getting angular/material to function properly

I've used the following command to install: npm install --save @angular/material @angular/cdk Afterwards, I made additions to app.module.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButto ...

angularangular-material

How to sort Firebase real-time database by the child node with the highest number of

I am working on a database feature that allows users to 'like' comments on posts. Is there a way for me to sort the comments based on the number of likes they have? Although I am aware of using .orderByChild(), my issue lies in not having a sep ...

javascriptfirebasefirebase-realtime-database

Adding a row with sorting order in AG Grid explained

Recently, I encountered an issue where rows added to the ag grid were not being sorted and instead always appeared at the bottom of the grid. I am looking to add rows with sorting order. Here is an example of what is currently happening: Actual results: ...

angularag-grid

Issue with Angular authentication during login attempt

I am a beginner in Angular and I'm using this method to allow users to log into the system. loginuser(){ const user = { username: this.username, password: this.password }; this.Auth.loginUser(user).subscribe((res)=>{ ...

angulartypescriptvisual-studio-codeobservable

How can you set a checkbox to be selected when a page loads using Angular?

On page load, I need a checkbox to already be 'checked', with the option for the user to uncheck it if they want. Despite trying to add [checked]="true" as recommended in some Stack Overflow answers, this solution is not working for me. <label ...

angularjstypescriptcheckbox

An unexpected error occurred while running ng lint in an Angular project

I've encountered an issue while trying to run ng lint on my Angular project. After migrating from TSLint to ESLint, I'm getting the following error message when running ng lint: An unhandled exception occurred: Invalid lint configuration. Nothing ...

angulartypescripteslint

Similar to `util.inspect` in Node.js, Deno also has a function

Is there a utility function in Deno that can stringify an Object or primitive similar to Node.js util.inspect? For instance, if I have a JSON object in Node.js and want to display its contents: > m = {k1:'v1', k2:'v2'} { k1: ' ...

javascripttypescriptdenoinspect

closing custom components in Ag-Grid React columns

I am currently utilizing version "27.1.0" of "ag-grid-react". In order to display a custom column component that presents a set of options and closes when the user makes a selection, I need it to trigger an API call. Since this component does not re-render ...

reactjstypescriptag-grid-react

Creating a type-safe method wrapper in TypeScript based on function names

Many Q&As discuss creating a function wrapper in TypeScript, but my question is how to do the same with named methods. I am interested in writing something similar to this JavaScript code: function wrap(API, fnName, fn) { const origFn = API.p ...

typescript

Error in Angular Protractor e2e test due to iteration function on mat-radio-group innerText

clickOnQuestionsOption(optionName) { const radioButtonList = $$('mat-radio-group > mat-radio-button'); const selected_btn = radioButtonList.filter(elem => { return elem.getText().then(text => { console.log(tex ...

angularprotractorradio-group