So ,I am an newbie in firebase and working on an team project. What client wants us to do is make user login with phonenumber and otp. First, I managed to login the user using this code as follows

import React, { useState } from "react";
import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import { auth } from "../../firebase/config";
const SignInWithNumber = () => {
  const [phone, setphone] = useState();
  const [otp, setotp] = useState();

  const handleRecaptcha = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(
      "sign-in-button",
      {
        size: "invisible",
        callback: (response) => {
          // reCAPTCHA solved, allow signInWithPhoneNumber.
        },
      },
      auth
    );
  };
  const handleSubmitNumber = (e) => {
    e.preventDefault();

    if (phone >= 10) {
      console.log(phone);
      handleRecaptcha();
      const phoneNumber = " 91"   phone;
      const appVerifier = window.recaptchaVerifier;

      signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
          window.confirmationResult = confirmationResult;
          // ...
          console.log("otp sent");
        })
        .catch((error) => {
          // Error; SMS not sent
          // ...
          console.log(error   "SMS not sent");
        });
    }
  };
  const handleSubmitOtp = (e) => {
    e.preventDefault();
    const code = otp;
    const x = window.confirmationResult;

    x.confirm(code)
      .then((result) => {
        // User signed in successfully.
        const user = result.user;
        console.log(user);
        // ...
      })
      .catch((error) => {
        // User couldn't sign in (bad verification code?)
        // ...
        console.log(error);
      });
  };
  const handleChange = (e) => {
    e.preventDefault();
    const { name, value } = e.target;
    switch (name) {
      case "phone":
        setphone(value);
        break;
      case "otp":
        setotp(value);
        break;
      default:
        break;
    }
  };
  return (
    <div>
      <h2>LogIn</h2>
      <form onSubmit={handleSubmitNumber}>
        <div id="sign-in-button"></div>
        <input type="number" name="phone" required onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
      <h2>Submit OTP</h2>
      <form onSubmit={handleSubmitOtp}>
        <input type="number" name="otp" required onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default SignInWithNumber;

Now , I am able to login user and get its uid in console but I also want to signup/register the user with his phone number otp and get his credentials such as name , address etc. This may be a dumb question but I cant find any solution to this. Thanks in advance :)

CodePudding user response：

There isn't any sign up method when using phone based auth. If a user doesn't exists then the account will be created (technically a sign up) else user will be logged in to existing account.

You can however check the isNewUser property after authentication to check if user logged in for first time or no.

Checkout Check for isNewUser with Firebase email link auth using modular JS SDK

x.confirm(code)
  .then((result) => {
    // User signed in successfully.
    const { isNewUser } = getAdditionalUserInfo(result)
    
    if (isNewUser) {
      // New user - sign up
    } else {
      // Existing user - log in
    }
  })

CodePudding user response：

First, the question is not dumb.

Secondly, for a solution, after signing in with phone number successfully, given that the account was just created (a new user), you can now show a form to obtain the user's name and other details.

On submit of this form, save the name to firebase authentication user object with updateProfile. Then save other data to a Firestore document with the user's uid as document id and preferably on the users collection.

On page load, you can check if the user is signed in, if true, check if the user has data in Firestore, if false, show the user the above form, else, continue app usage as you want.