Experience a new way to log in with signInWithPopup, leaving the Email

I am currently working on developing a registration form that utilizes Firebase auth for authentication.

There are two methods available for registering users:

  1. Using Email / Password Provider
  2. Using Google Auth Provider

Here is the process I follow:

Step 1: Initially, I register using the Email/Password provider and an account is created successfully.

Image after creating user with Email / Password

Step 2: Next, if a user tries to login using Google with the same email account using signInWithPopup, the current provider (Email/Password) gets replaced with Google. Subsequently, trying to log in using Email/Password authentication does not work because it has been replaced with Google.

What I need is:

  1. When attempting to create a user with signInWithPopup, check if the user already exists and immediately redirect to the dashboard without replacing the Email/Password Provider.

Or

  1. Show an error message stating 
    Email is already registered using Email/Password. Try logging in using Email/Password

The project uses NextJS with Typescript and here is the full code snippet:

<!-- Code snippet omitted for brevity -->

Tried incorporating fetchSignInMethodsForEmail method within signInWithPopup but encountered unresolved issues.

typescriptfirebasenext.jsfirebase-authentication

Answer №1

The issue you are experiencing is operating as intended for specific email addresses from certain providers. For example, Google is a preferred provider for @gmail.com addresses. When signing into Google with an account that has a gmail address, it takes priority over other providers using the same address.

To avoid this problem, here are the steps to follow:

  1. Instruct the user to input their email address.
  2. Verify if the email address is already associated with your project by utilizing fetchSignInMethodsForEmail. This function will provide information on the known providers/sign-in methods linked to the email address.

Use this data to display the appropriate provider interface to the user so they can sign in to their existing account seamlessly.

Answer №2

After encountering the same error, I discovered that it was due to the email address not being verified at the time when the user attempted Google authentication.

To solve this issue, I implemented a system where an email verification link is sent to the user immediately after account creation (which requires user confirmation by clicking on the link).

By using either this link or a password reset link, the email address is verified. Subsequently, when a verified user attempts to use a different provider such as Google, it gets added as another provider without replacing the original email/password provider.

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

Adjust Column Title in Table

Is it possible to customize the column headers in a mat-table and save the updated value in a variable? I've been looking for a solution to this but haven't found one yet. ...

angulartypescriptmat-table

What is the best way to utilize TypeScript module augmentation with material-ui components?

I have gone through the answers provided in this source and also here in this link, but it appears that they are outdated. I attempted to enhance the type definition for the button component in various ways, including a separate typings file (.d.ts) as we ...

javascriptreactjstypescriptmaterial-ui

Laravel Rest API and Github Authentication for Next.js login

I am facing an issue with GitHub authentication login. My setup involves using Laravel API for the backend and Next.js for the frontend. The goal is to allow users to log in with their GitHub accounts. I have already installed the Laravel Socialite package ...

laravelgithubnext.js

Uh oh, it looks like there's an issue! The function getCoordinates is not recognized for this.locations

Whenever I attempt to execute the method in my class (getCoordinates()), an Error is thrown: ERROR TypeError: this.locations[0].getCoordinates is not a function What am I doing wrong? The service method I'm using: getLocations(){ return this ...

angulartypescript

forEach was unable to determine the appropriate data types

define function a(param: number): number; define function b(param: string): string; define function c(param: boolean): boolean; type GeneralHooks<H extends (...args: any[]) => any> = [H, Parameters<H>] const obj = { a: [a, [1]] as Gene ...

typescript

What could be the missing piece? The function is expected to provide a return value

Currently, I am developing a Typescript Express API and encountering an issue with one of my methods. The problem arises when trying to handle data received in a callback function. public async getAll(): Promise<GeneralResponse> { locationsRe ...

node.jstypescriptexpress

Tips for modifying the text color of a div that is being iterated through using ngFor

I am facing an issue with a div that is being looped using ngFor. What I want to achieve is when a user clicks on one of the divs in the loop, only that particular div should change its text color. If another div is clicked, it should change color while th ...

angulartypescriptangular2-services

Utilizing web components in React by solely relying on a CDN for integration

I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...

javascripthtmlreactjstypescriptweb-component

How to best handle dispatching two async thunk actions in Redux Toolkit when using TypeScript?

A recent challenge arose when attempting to utilize two different versions of an API. The approach involved checking for a 404 error with version v2, and if found, falling back to version v1. The plan was to create separate async thunk actions for each ver ...

javascriptreactjstypescriptreduxredux-toolkit

There is no index signature that includes a parameter of type 'string' in the specified type

I have a background in mobile app development and am looking to learn more about TypeScript. How can I declare a map object with the form [string:any]? The error is occurring at line: map[key] = value; Element implicitly has an 'any' type becaus ...

node.jstypescriptdictionarygoogle-cloud-firestore

What is the best way to make a class available in the global namespace within a TypeScript module?

The Issue at Hand Given an existing application with a mixture of modules and global scripts, the goal is to convert one class in a global script (gamma.ts) into a module. This entails adding `export default` before `class gamma {}` in gamma.ts. Additiona ...

typescriptes6-modules

Posting an array as form data in Angular Typescript: A step-by-step guide

Hello there, I'm currently developing an application using Angular 8 and integrating web.api within .net core 2.2. One of the challenges I encountered is dealing with multi-selectable checkboxes in a form that also includes "regular" inputs and file ...

arraysangulartypescripthttp-postasp.net-core-webapi

What is the best way to conceal a header on a single page within a Next.js application?

Currently working on a Next.js application, I've developed a <Header /> component and integrated it into the _app.tsx file. However, I'm looking to have it displayed on all pages except for one. Is there a way to achieve this? ...

next.js

Has the antd Form.create() method been substituted with something else?

I have been working on creating a login page in react using antd. I came across a tutorial that seems to be outdated as it is giving me an error. After researching on a forum, I found out that form.create() is no longer available, but I am unsure of how to ...

reactjstypescriptreact-reduxantd

Building a PathString Tree

I encountered a similar issue like the one discussed in this post (Get a tree like structure out of path string). I attempted to implement the suggested solution but I am facing difficulties getting it to work within an Angular context. The concept involv ...

javascriptarraysangulartypescripttree

What are the steps for creating and deploying a project that utilizes asp.net core on the server-side and Angular on the client-side

My latest project combines asp.net core 5 and angular 15 technologies for the backend and frontend, respectively. The asp.net core MVC portion of the project is contained in a dedicated folder named serverApi, while the angular part is generated in another ...

angulartypescriptasp.net-core

What could be causing TypeScript to not locate my custom package?

I decided to create a fork of an existing package and released it with a new, distinct name: https://www.npmjs.com/package/feed-media-fork After tagging a new version, setting up a release on GitHub, and running yarn add feed-media-fork or the equivalent ...

typescriptnpmnode-modulesnpm-package

Utilizing Angular 2 for Element Selection and Event Handling

function onLoaded() { var firstColumnBody = document.querySelector(".fix-column > .tbody"), restColumnsBody = document.querySelector(".rest-columns > .tbody"), restColumnsHead = document.querySelector(".rest-columns > .thead"); res ...

angulardomtypescript

Is there a different method to retrieve language bundles with next-i18next instead of using a customized Node server?

Currently, I am developing a Next.js application that will utilize i18next translations organized in the recommended file structure for bundles. For example: static/locales/en/common.js static/locales/de/common.js You can refer to this article: https://m ...

javascriptreactjsnext.jsi18next

Trouble arises when attempting to transfer cookies between server in Fastify and application in Svelte Kit

In the process of developing a web application, I am utilizing Fastify for the backend server and Svelte Kit for the frontend. My current challenge lies in sending cookies from the server to the client effectively. Despite configuring Fastify with the @fas ...

javascripttypescriptcookiessveltefastify