Anonymous authentication in firebase using React JS
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 thereact-firebase-hooks/auth
library. - Conditional Rendering Logic: Utilize the
useAuthState
hook in theApp
component to conditionally render theMain
orLogin
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’ssignOut
function. - Login Component Behavior: Implement the
Login
component, featuring a button triggering the anonymous sign-in process through Firebase’ssignInAnonymously
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; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000