Anonymous authentication in firebase using React JS

Last Updated : 12 Dec, 2023

This method explains how to sign in without revealing your identity using Firebase in a React app. It’s like having a secret entry you create and use temporary anonymous accounts for logging in. We make it happen by using the special tools provided by Firebase.

Prerequisites:

Approach to implement anonymous authentication:

Authentication Structure: Organize a React app with components (App, Main, Login) to manage the authentication flow using Firebase, incorporating the react-firebase-hooks/auth library.
Conditional Rendering Logic: Utilize the useAuthState hook in the App component to conditionally render the Main or Login component based on the user’s authentication status.
Main Component Functionality: Inside the Main component, present a user interface acknowledging anonymous login success, and implement a logout button using Firebase’s signOut function.
Login Component Behavior: Implement the Login component, featuring a button triggering the anonymous sign-in process through Firebase’s signInAnonymously function, with error handling via an alert.

Steps to creat React Application And Installing Module:

Step 1: Create a React myapp using the following command:

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command:

cd myapp

Step 3: After creating the ReactJS application, Install the firebase module using the following command:

npm install firebase@8.3.1 --save

Step 4: Go to your firebase dashboard and create a new project and copy your credentials.

const firebaseConfig = {
      apiKey: "your api key",
      authDomain: "your credentials",
      projectId: "your credentials",
      storageBucket: "your credentials",
      messagingSenderId: "your credentials",
      appId: "your credentials"
};

Step 5: Go to your firebase dashboard and Enable the Anonymous sign-in method as shown below.

Step 6: Now install the npm package i.e. react-firebase-hooks using the following command.

npm i react-firebase-hooks

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "firebase": "^8.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Initialize the Firebase into your project by creating firebase.js file with the following code.

Javascript

//App.js
 
import React from 'react';
import auth from './firebase';
import { useAuthState }
    from 'react-firebase-hooks/auth';
import Login from './login';
import Main from './main';
 
function App() {
    const [user] = useAuthState(auth);
    return (
        user ? <Main /> : <Login />
    );
}
 
export default App;

Javascript

//main.js
 
import React from 'react';
import auth from './firebase';
 
const Main = () => {
 
    // Signout function
    const logout = () => {
        auth.signOut();
    }
 
    return (
        <div style={{ "marginTop": "200px" }}>
            <center>
                Anonymous Login Success
                <button style={{ "marginLeft": "20px" }}
                    onClick={logout}>
                    Logout
                </button>
            </center>
        </div>
    );
}
 
export default Main;

Javascript

//login.js
 
import React from 'react';
import auth from './firebase.js';
 
const Login = () => {
 
    // Sign in Anonymously
    const signin = () => {
        auth.signInAnonymously().catch(alert);
    }
     
    return (
        <div>
            <center>
                <button style={{"marginTop" : "200px"}}
                    onClick={signin}>
                    Sign In Anonymously
                </button>
            </center>
        </div>
    );
}
 
export default Login;

Javascript

//firebase.js
 
import firebase from 'firebase';
 
const firebaseConfig = {
    // Your Credentials
};
 
firebase.initializeApp(firebaseConfig);
var auth = firebase.auth();
export default auth;