Firebase là một nền tảng phát triển ứng dụng được hỗ trợ bởi Google và được hàng triệu doanh nghiệp trên toàn thế giới sử dụng. 

Một trong những chức năng cốt lõi của nó là cung cấp một hệ thống xác thực cho phép các nhà phát triển web tạo các trang web với xác thực người dùng an toàn chỉ với vài dòng mã. Điều này giúp bạn tiết kiệm rất nhiều thời gian khi tạo trang web bằng cách không cần phát triển các hệ thống xác minh token phía máy chủ.

Trong hướng dẫn này, mình sẽ cùng mọi người thiết lập cách authentication với google thông qua Firebase.

Bước 1.Tạo Project trên firebase

Mọi người vào Firebase để tạo 1 project mới nha.

Các bước: Get Started → Add project → Insert a project name → uncheck “enable google analytics” → Create project

Sau khi bấm vào button "Register app" thì màn hình sẽ như bên dưới, Mọi người chọn option NPM để cài thư viện và copy đoạn code config này nha, hoặc nếu mọi người không thấy đoạn config thì vào project settings để lấy config nha

Bước 2: Kết nối với Firebase

Mọi người cài đặt thư viện firebase bằng 1 trong 2 lệnh

npm i firebase

or

yarn add firebase

Mọi người tạo 1 file firebase.ts (có thể để trong config để sử dụng sau này nha) và copy đoạn config  của firebase bên dưới bỏ vào file vừa tạo nha.

import { type FirebaseOptions, initializeApp} from 'firebase/app' 
import { getAuth, GoogleAuthProvider } from 'firebase/auth' 
// Your web app's Firebase configuration 
export const firebaseConfig: FirebaseOptions = { 
apiKey: 'AIzaSyCNhFLEuHtB-jK9jMX1d3tfVF5BfEZrALCM', 
authDomain: 'test.firebaseapp.com', 
projectId: 'test', 
storageBucket: 'test.appspot.com', 
messagingSenderId: '537899680446', 
appId: '1:537899680446:web:4e42170bd6a2f5a2394d4ef', 
measurementId: 'G-5E91P11RJ9' 
} 
export const firebaseApp = initializeApp(firebaseConfig) 
export const authFirebase = getAuth(firebaseApp) 
export const googleProvider = new GoogleAuthProvider() 
// select account 
googleProvider.setCustomParameters({ prompt: 'select_account' })

Tiếp theo, mọi người bấm vào authentication

Sau đó, mọi người chọn vào google, và bấm vào toggle enable để kích hoạt.

Tiếp theo, cùng nhau sử dụng hàm để hoàn thành authentication với google

import { signInWithPopup } from 'firebase/auth' 
import { authFirebase,googleProvider } from 'src/configs/firebase' 
const SignIn = () => { 
const logGoogleUser = async () => {        
const response = signInWithPopup(authFirebase, googleProvider)        
console.log(response);    
} 
return (        
<div>            
<button onClick={logGoogleUser}>Sign In With Google</button>       
 </div>    
) 
} 
export default SignIn;

Vậy là mình đã hướng dẫn mọi người setup và hoàn thành authentication với google qua firebase rồi nhé.

Đây là kết quả của bài blog bài