Tabbatarwa da izini a cikin Next.js

A cikin wannan sashe, za mu jagorance ku ta hanyar aiwatar da amincin mai amfani da ikon shiga cikin Next.js aikace-aikacenku. Za ku koyi yadda ake samun amintaccen shiga mai amfani da ingantaccen sarrafa izinin mai amfani ta amfani da ayyuka kamar Firebase ko Auth0.

Tabbatar da mai amfani tare da Firebase

Firebase yana ba da ƙayyadaddun tsarin kayan aiki don gina tsarin tabbatarwa. A ƙasa akwai misalin yadda ake saita amincin mai amfani ta amfani Firebase da aikace-aikacen ku Next.js:

Saita Firebase aiki kuma kunna sabis na tantancewa.

Shigar da Firebase JavaScript SDK:

npm install firebase

Sanya Firebase cikin aikace-aikacen ku:

import firebase from 'firebase/app';  
import 'firebase/auth';  
  
const firebaseConfig = {  
  apiKey: 'YOUR_API_KEY',  
  authDomain: 'YOUR_AUTH_DOMAIN',  
  projectId: 'YOUR_PROJECT_ID',  
  storageBucket: 'YOUR_STORAGE_BUCKET',  
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',  
  appId: 'YOUR_APP_ID',  
};  
  
if(!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);  
}  

Aiwatar da amincin mai amfani:

import firebase from 'firebase/app';  
import 'firebase/auth';  
  
// Sign up with email and password  
const signUpWithEmail = async(email, password) => {  
  try {  
    await firebase.auth().createUserWithEmailAndPassword(email, password);  
  } catch(error) {  
    console.error(error);  
  }  
};  
  
// Sign in with email and password  
const signInWithEmail = async(email, password) => {  
  try {  
    await firebase.auth().signInWithEmailAndPassword(email, password);  
  } catch(error) {  
    console.error(error);  
  }  
};  

Tabbatar da mai amfani tare da Auth0

Auth0 dandamali ne na tabbaci da izini wanda ke sauƙaƙa haɗa ingantaccen amincin mai amfani cikin aikace-aikacen ku. Anan ga yadda zaku iya amfani da Auth0 don amincin mai amfani a cikin Next.js app ɗin ku:

Yi rajista don asusun Auth0 kuma ƙirƙirar aikace-aikace.

Shigar da Auth0 SDK:

npm install @auth0/auth0-react

Sanya Auth0 a cikin aikace-aikacen ku:

import { Auth0Provider } from '@auth0/auth0-react';  
  
const Auth0ProviderWithHistory =({ children }) => {  
  const domain = 'YOUR_AUTH0_DOMAIN';  
  const clientId = 'YOUR_CLIENT_ID';  
  
  return( 
    <Auth0Provider  
      domain={domain}  
      clientId={clientId}  
      redirectUri={window.location.origin}  
    >  
      {children}  
    </Auth0Provider>  
 );  
};  

Aiwatar da amincin mai amfani:

import { useAuth0 } from '@auth0/auth0-react';  
  
function AuthButton() {  
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();  
  
  if(isAuthenticated) {  
    return <button onClick={() => logout()}>Log out</button>;  
  } else {  
    return <button onClick={() => loginWithRedirect()}>Log in</button>;  
  }  
}  

Ikon shiga da izini

Baya ga tabbatarwa, ikon samun dama da izini suna tabbatar da cewa masu amfani suna da izini masu dacewa don isa ga wasu sassan aikace-aikacen ku. Kuna iya sarrafa matsayin mai amfani da izini ta amfani da Firebase ko aiwatar da dabarun izini na al'ada dangane da halayen mai amfani.

Kammalawa

Wannan sashe ya nuna muku yadda ake aiwatar da amincin mai amfani da ikon shiga cikin Next.js aikace-aikacenku ta amfani da ayyuka kamar Firebase ko Auth0. Ta hanyar tabbatar da amintaccen shiga mai amfani da sarrafa izinin mai amfani yadda ya kamata, zaku iya ƙirƙirar mafi aminci kuma ingantaccen ƙwarewar mai amfani a cikin aikace-aikacenku.