Firebase- Authentication (signUp and login) in web

 

Firebase- Authentication (signUp and login) in web

December 27, 2022 by ShubhamJi

Firebase provides detailed documentation and cross-platform SDKs to help you build and ship apps on Android, iOS, the web, C++, and Unity.

SignIn steps:-

1-Open Firebase in chrome

2-click Add project

3-Enter project name

4-select country and then click on create a project .

Now your project is ready;

5-click on the web to create a web app

You can see the icon in the circle-pointed area.

6-Now register your app and add SDK to your project

7-There are two ways to add SDK in your project, first is by npm and another is by CDN or script tag.

8-click on the Build in the left pane,

9-click on Authentication, then click on Email/password.

10-Go to the Sign_In method, Enable the Email/password. Click save.

11-Now add this code in your <script></script> tag but after adding SDK.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

12-SignIn for existing users ;

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });