🔐Authentication with Firebase
Using Firebase REST API for authentication basics.
Creating a Firebase Project
We need to create a Firebase project, but we will be using the Authentication
feature instead of the Realtime database
now. If you already have a Firebase project set up, you can use the Authentication
feature for that project.
Sign-in providers
Firebase offers a range of sign-in providers. You can select any one from these.

Here, we will be using the generic authentication flow using the Email/Password
sign-in provider. We need to enable
this sign-in provider by clicking on it and changing the configuration to enable it. We are using this sign-in provider to mimic our own Authentication API.

Firebase REST API
Now, we need to connect the REST API to handle adding new users and allowing existing users to log in to our web application. This can be done by referring to the docs here.
Registering New Users
With our Firebase authentication set up, we can now add users to our application, and give them appropriate authentication tokens to access protected resources within our web app.
I'll be using a custom hook to set up a fetch request to the Firebase API to add new users via authentication. Here is the custom hook:
import { useState, useCallback } from 'react';
export const useHttp = () => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const sendRequest = useCallback(async (reqConfig) => {
setIsLoading(true);
setError(null);
try {
const response = await fetch(reqConfig.url, {
method: reqConfig.method ? reqConfig.method : 'GET',
headers: reqConfig.headers ? reqConfig.headers : {},
body: reqConfig.body ? JSON.stringify(reqConfig.body) : null,
});
const data = await response.json();
if (!response.ok) {
if(data.error) {
throw new Error(data.error.message);
}
}
} catch (error) {
setError(error.message);
}
setIsLoading(false);
}, []);
return {
isLoading,
error,
sendRequest,
};
};
Next, we will use this custom hook in our AuthForm
component to register a user to our app.
Sign up with email / password
To use the Sign-up REST API from Firebase, we need to use these docs.

import {useState, useRef} from 'react';
import {useHttp} from '../../hooks/use-http';
const API_KEY = 'xxx_API_KEY_xxx';
const AuthForm = () => {
const {isLoading, error, sendRequest: userAuth} = useHttp();
const [isLogin, setIsLogin] = useState(true);
const emailInputRef = useRef();
const pwdInputRef = useRef();
const switchAuthModeHandler = () => {
setIsLogin(prevState => !prevState);
}
const submitFormHandler = (event) => {
event.preventDefault();
const enteredEmail = emailInputRef.current.value();
const enteredPwd = pwdInputRef.current.value();
if(isLogin) {
}else {
userAuth{
url: `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${API_KEY}`,
method: 'POST,
headers: {
'Content-Type': 'application/json',
},
body: {
email: enteredEmail,
password: enteredPwd,
returnSecureToken: true,
},
})
}
}
return (
<section>
<h1>{isLogin ? 'Login' : 'Sign Up'}</h1>
<form onSubmit={submitFormHandler}>
<div>
<label htmlFor="email">Your Email</label>
<input type="email" id="email" ref={emailInputRef} required />
</div>
<div>
<label htmlFor="password">Your Password</label>
<input type="password" id="password" ref={pwdInputRef} required />
</div>
<div>
<button>{isLogin ? 'Login' : 'Create Account'}</button>
<button
type="button"
onClick={switchAuthModeHandler}
>
{isLogin ? 'Create new account' : 'Login with existing account'}
</button>
</div>
</form>
</section>
);
}
After we successfully register a new user to our app, we can see the use with email and password added to our Firebase console:

Firebase automatically creates the Authentication token
for each user, which is under the User UID
tab.
Existing User Login
After successfully registering a user to our Firebase back-end API, it is time we add the logic to allow already registered users to gain access to the protected resources in our app. We would need to refer these docs.
Sign in with email / password
We will use the same custom HTTP hook that we created before to issue a POST
request to verify the password at the verifyPassword
API endpoint.
Method: POST
Content-Type: application/json
Endpoint:
https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[API_KEY]

Logic for sign-in of a user and sending a POST
request to the API endpoint:
const API_KEY = 'xxx_API_KEY_xxx';
const SIGN_UP_URL = `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${API_KEY}`;
const SIGN_IN_URL = `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${API_KEY}`
//...
//...
const submitFormHandler = (event) => {
//...
//...
if(isLogin){
url = SIGN_IN_URL;
} else {
url = SIGN_UP_URL;
}
userAuth({
url,
method: 'POST,
headers: {
'Content-Type': 'application/json',
},
body: {
email: enteredEmail,
password: enteredPwd,
returnSecureToken: true,
},
})
}
Last updated
Was this helpful?