Create a new user account in the backend system before proceeding with authentication using Firebase Google sign-in

Question

Create a new user account in the backend system before proceeding with authentication using Firebase Google sign-in

Is it possible to register a user in the backend before authenticating with firebase Google sign-in?

My goal is to achieve the following steps:

User clicks on "sign in with Google"
User logs in with their Google account
A popup closes, and the user sees a loading screen while a request is sent to the backend to register the user using the provided email
If the response is successful, the user is authenticated and signed in

The issue I'm facing is that the user is immediately signed in by Firebase with a session after logging in through the popup. I am trying to delay signing in the user until the backend registration request is completed successfully.

Below is the code snippet I am currently working on:

 async function GoogleSignIn() {
        const result = firebase.auth().signInWithPopup(provider, { updateCurrentUser: false })

        // Get the signed-in user's info
        const email = result.email

        const response = await fetch(`${API_URL}/api/account/register/`, {
            method: "POST",
            headers: {
                "Content-type": "application/json",
            },
            body: JSON.stringify(email),
        });
    }

javascript firebase next.js

Answer 1

Answer №1

If you want to perform certain actions before creating or signing in a user using Firebase, you can utilize blocking functions.

Note: You will need to upgrade to the Firebase Identity Platform to use blocking functions

Take a look at the sample code snippet below.

const functions = require('firebase-functions');

// Action to take before creating a user
exports.beforeCreate = functions.auth.user().beforeCreate((user, context) => {
  const email = user.email;

  try {
    const response = await fetch(`${API_URL}/api/account/register/`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify(email),
    });
    return response;
  } catch () {
    throw new functions.auth.HttpsError('failed-precondition');
  }
});

// Action to take before signing in a user
exports.beforeSignIn = functions.auth.user().beforeSignIn((user, context) => {
  const email = user.email;

  try {
    const response = await fetch(`${API_URL}/api/account/register/`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify(email),
    });
    return response;
  } catch () {
    throw new functions.auth.HttpsError('failed-precondition');
  }
});

For more information, refer to the Firebase documentation.

Answer 2

If you want to perform certain actions before creating or signing in a user using Firebase, you can utilize blocking functions.

Note: You will need to upgrade to the Firebase Identity Platform to use blocking functions

Take a look at the sample code snippet below.

const functions = require('firebase-functions');

// Action to take before creating a user
exports.beforeCreate = functions.auth.user().beforeCreate((user, context) => {
  const email = user.email;

  try {
    const response = await fetch(`${API_URL}/api/account/register/`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify(email),
    });
    return response;
  } catch () {
    throw new functions.auth.HttpsError('failed-precondition');
  }
});

// Action to take before signing in a user
exports.beforeSignIn = functions.auth.user().beforeSignIn((user, context) => {
  const email = user.email;

  try {
    const response = await fetch(`${API_URL}/api/account/register/`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify(email),
    });
    return response;
  } catch () {
    throw new functions.auth.HttpsError('failed-precondition');
  }
});

For more information, refer to the Firebase documentation.

Create a new user account in the backend system before proceeding with authentication using Firebase Google sign-in

Answer №1

Similar questions

Can anyone help me with integrating a search functionality inside a select tag?

Step-by-Step Guide to Sending Push Notifications via GCM with XHR (Ajax)

What is the best way to add a new div below a specific div without disrupting the existing layout of other elements on the page?

Sending product identification to content_ids for Facebook Pixel tracking

The database server is not appearing on the main.js page of the client

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

achieving outcomes beyond iframe boundaries

Navigating the Angular Element: A Guide to Clicking Buttons within Modal-Dialogs Using Protractor

Tips for troubleshooting a stuck promise that won't resolve when executing a Postgres query with node-postgres

Employing on() for triggering a form submission

How can you obtain the userID in the Next.js 13 application directory on the server side using next-auth?

Dynamic variable declarations in JavaScript

What is the best way to enable momentum-based scrolling for the root <html> element in iOS Safari?

Encountering Error with Axios in Nuxt while Navigating Pages

When trying to pass context to the interactive node shell, an error message may appear stating "TypeError: sandbox argument must be converted to a context"

Encountering difficulties reading data from a database in a Next.js/Firebase application

Changing UUID from binary to text and vice versa in NodeJS

Error: The property 'pathname' cannot be read, as it is null

Is it considered poor form to send as many as 100 ajax requests when loading a webpage?

The functionality of Redux is not compatible within NEXT JS middleware