Building user management and authentication functions in-house poses many challenges in terms of security and scalability.Firebase AuthenticationBy using Firebase Authentication, you can solve these issues and quickly implement a secure authentication system. In this article, we will explain how to build a login authentication system using Firebase Authentication, along with practical code examples.
Firebase Authentication Overview
Firebase Authenticationis an authentication service provided by Google and has the following features:
• Various authentication methods: Supports email/password, phone number, and social logins such as Google, Facebook, and Twitter.
• Easy integration: You can quickly integrate authentication functionality using the client SDK or FirebaseUI.
• Safety features: It runs on Google's infrastructure and meets high security standards.
Please refer to the official documentation for details.
Setting up your Firebase project
Step 1: Creating a Firebase Project
1. Firebase ConsoleGo to and create a new project.
2. Enter a project name and configure Google Analytics if necessary.
Step 2: Register your web app
1. In your project dashboard, click on "Add App" and select the Web icon.
2. Enter a nickname for your app and choose if you want to use Firebase Hosting.
3. Take note of the Firebase SDK setting information that is displayed.
Implementing email and password authentication
Step 1: Enabling the authentication method
1. Go to the "Authentication" section of the Firebase console.
2. On the "Login method" tab, enable "Email/Password".
Step 2: Install Firebase SDK
Add the Firebase SDK to your project and initialize the authentication functionality.
1 | import { initializeApp } from "firebase/app"; import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth"; const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_PROJECT_ID.firebaseapp.com", // Other configuration items}; const app = initializeApp(firebaseConfig); const auth = getAuth(app); |
Step 3: Implementing user registration and login functionality
Implement user registration and login functions.
1 | // Register user createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Registration successful const user = userCredential.user; }) .catch((error) => { // Handle error }); // Login signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Login successful const user = userCredential.user; }) .catch((error) => { // Handle error }); |
Introducing social login
Step 1: Enable the authentication provider
In the "Authentication" section of the Firebase console, enable the social login providers you want to use (e.g. Google, Facebook) and configure them as required.
Step 2: Implementing Social Login
As an example, here's how to implement Google Login.
1 | import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"; const provider = new GoogleAuthProvider(); signInWithPopup(auth, provider) .then((result) => { // Sign in successfully. const user = result.user; }) .catch((error) => { // Handle the error. }); |
Configuring security rules
Firebase allows you to set security rules to control access to your database and storage.
For example, a rule that allows only authenticated users to read and write data in Firestore might look like this:
1 | rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth != null; } } } |
For detailed instructions on how to set security rules, seeOfficial DocumentationPlease refer to.
summary
By using Firebase Authentication, you can quickly build a secure and scalable authentication system. Email/password authentication and social login are also easy to implement, and data protection can be strengthened by setting appropriate security rules. Please use this article as a reference and try implementing an authentication function using Firebase Authentication.
English 
Japanese