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
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
import React from 'react' ;
import auth from './firebase' ;
const Main = () => {
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
import React from 'react' ;
import auth from './firebase.js' ;
const Login = () => {
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
import firebase from 'firebase' ;
const firebaseConfig = {
};
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
Share your thoughts in the comments
Please Login to comment...