I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Costruire un sistema di autenticazione personalizzato può essere un compito arduo. Richiede una profonda conoscenza dei protocolli di autenticazione e dei processi di autenticazione e autorizzazione degli utenti. Tuttavia, integrando uno strumento come Supabase, puoi concentrarti maggiormente sulla costruzione della logica di base della tua applicazione.

Supabase è un'alternativa Firebase open source che fornisce una piattaforma di sviluppo basata su cloud. Offre una gamma di servizi di back-end come un database Postgres completo, un servizio di autenticazione e funzionalità serverless.

È progettato per essere più accessibile, consentendo di impostare rapidamente i progetti. Segui per sapere come integrare il servizio di autenticazione nelle tue applicazioni React.js.

Crea un nuovo progetto su Supabase Developer Console

instagram viewer

Per creare un nuovo progetto su Supabase Developer Console, segui questi passaggi:

  1. Iscriviti per un Supabase account sviluppatore. Passare alla dashboard e creare un nuovo progetto.
  2. Inserisci il nome del progetto e una password (questo è facoltativo per questo tutorial ma consigliato quando si imposta un database), seleziona la regione e infine fai clic su Crea nuovo progetto.
  3. In Impostazioni API, copia il progetto URL e il pubblico anon chiave.

Imposta un provider di autenticazione

Un provider di autenticazione fornisce agli utenti un modo sicuro per autenticarsi utilizzando vari accessi social. Supabase per impostazione predefinita fornisce un provider di posta elettronica. Inoltre, puoi aggiungere altri provider come Google, GitHub o Discord a seconda delle tue preferenze.

Questo tutorial dimostrerà come configurare un provider Google. Per fare ciò, segui questi passaggi:

  1. Nel riquadro di sinistra selezionare il Autenticazione scheda.
  2. Nella pagina delle impostazioni di autenticazione, seleziona il Fornitori opzione e, infine, selezionare l' Fornitore di Google dall'elenco dei fornitori. Si noti che il provider di posta elettronica è già configurato per impostazione predefinita. Non è necessario effettuare alcuna configurazione.
  3. Abilita il Fornitore interruttore.
  4. Il provider Google richiede due input: un ClientID e un ClientSecret. Otterrai questi due valori dopo aver creato un'applicazione su Google Developer Console. Per ora, copia il file URL di reindirizzamento. Lo utilizzerai per impostare un'applicazione su Google Developer Console per ottenere ClientID e ClientSecret.

Imposta il tuo progetto su Google Developer Console (GDC)

Per autenticarti con Google, dovrai registrare la tua app sulla Google Developer Console (GDC) e ottenere un ClientID e un ClientSecret. Segui questi passaggi per impostare un progetto su GDC:

  1. Vai a Console per gli sviluppatori di Google e accedi con il tuo account Google per accedere alla console.
  2. Una volta effettuato l'accesso, vai al API e servizi scheda, scegli il Crea credenziali opzione, quindi selezionare ID client OAuth.
  3. Specifica il tipo di applicazione dalle opzioni fornite e quindi inserisci il nome della tua applicazione.
  4. Successivamente, specifica l'URL della home route della tua app (http://:localhost: 3000) e, infine, specificare l'URL di reindirizzamento della richiamata. Incolla l'URL di reindirizzamento che hai copiato dalla pagina delle impostazioni del provider Google Supabase. Clicca su Salva per completare il processo.
  5. Copia il Identificativo cliente E ClientSecret e torna alla dashboard del progetto Supabase e incollali nei campi di input ClientID e ClientSecret nella pagina delle impostazioni del provider Google. Clic Salva per abilitare il Provider.

Configura il servizio di autenticazione Supabase in un'applicazione React.js

Crea un'applicazione React.js, quindi apri la cartella del progetto nel tuo editor di codice preferito. Successivamente, nella directory principale della cartella del tuo progetto, crea un file ENV per contenere le tue variabili di ambiente: l'URL del tuo progetto e la tua chiave anonima pubblica. Vai alla pagina delle impostazioni di Supabase, apri la sezione API e copia l'URL del progetto e la chiave anonima pubblica.

REACT_APP_SUPABASE_URL= URL del progetto
REACT_APP_SUPABASE_API_KEY = pubblico anon chiave

1. Installa i pacchetti richiesti

Esegui questo comando sul tuo terminale per installare le dipendenze richieste:

installazione npm @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Crea i componenti Pagina di accesso e Pagina di successo

Crea una nuova cartella nella directory /src della tua applicazione React.js e chiamala pagine. All'interno di questa cartella, crea due file: Login.js e Success.js.

3. Componente della pagina di accesso

Questo componente eseguirà il rendering di una funzione di registrazione e accesso, utilizzando l'interfaccia utente di autenticazione React.js fornita da Supabase. Hai importato l'interfaccia utente auth come dipendenza (@supabase/auth-UI-react), semplificando l'implementazione della funzionalità di autenticazione.

Nel file login.js, aggiungi il codice seguente:

importare Reagire da'reagire';
importare {createClient} da'@supabase/supabase-js';
importare {Auth, ThemeSupa} da'@supabase/auth-ui-reagire';
importare {useNavigate} da'reagire-router-dom';
cost supabase = creaCliente(
processi.env.REACT_APP_SUPABASE_URL,
processi.env.REACT_APP_SUPABASE_API_KEY
); 
funzioneLogin() {
cost naviga = usaNaviga(); 
 supabase.auth.onAuthStateChange(asincrono (evento) =>{
Se (evento !== "DISCONNESSO") {
 navigare('/successo');
 }altro{
 navigare('/');
 }
 })
ritorno (
<divnome della classe="App">
<intestazionenome della classe="Intestazione app">
 supabaseClient={supabase}
 aspetto={{tema: ThemeSupa}}
 tema="buio"
 fornitori={['Google']}
 /> 
intestazione>
div>
 );
}
esportarepredefinito Login;

Analizziamolo:

  • Inizializza un client Supabase con le variabili di ambiente: l'URL del tuo progetto e la tua chiave anonima pubblica nel file ENV.
  • Imposta un listener di eventi per tenere traccia delle modifiche nello stato di autenticazione utilizzando il metodo supabase.auth.onAuthStateChange(), ad esempio se il lo stato di autenticazione non è "SIGNED_OUT", quindi l'utente viene indirizzato alla pagina "/success", altrimenti l'utente viene indirizzato alla pagina "/" (home/login) pagina.
  • Utilizzerai il metodo navigate dall'hook useNavigate per gestire questo processo.
  • Infine, restituisci un div contenente il componente React Auth UI dalla libreria Supabase con l'aspetto di themeSupa (fornito da Supabase), tema scuro e provider Google impostati come proprietà.

4. Componente della pagina di successo

Questo componente visualizzerà una pagina di successo con i dettagli dell'utente dopo che un utente è stato autenticato correttamente e un pulsante di disconnessione.

Nel file Success.js, aggiungi il codice seguente:

importare Reagire da'reagire';
importare {createClient} da'@supabase/supabase-js';
importare {useNavigate} da'reagire-router-dom';
importare {useEffect, useState} da'reagire';
cost supabase = creaCliente(
processi.env.REACT_APP_SUPABASE_URL,
processi.env.REACT_APP_SUPABASE_API_KEY
); 
funzioneSuccesso() {
cost [utente, setUser] = useState([]); 
cost naviga = usaNaviga(); 
 usaEffetto (() => {
asincronofunzionegetUserData(){
attendere supabase.auth.getUser().then((valore) => {
Se(valore.dati?.utente) {
setUser(valore.dati.utente)} 
 }) }
 getUserData();
 },[]);
cost avatar = utente?.user_metadata?.avatar_url; 
cost userName = utente?.user_metadata?.full_Name; 
asincronofunzionesignOutUser(){
attenderesupbase.auth.disconnessione();
 navigare('/');
 };
ritorno (
<divnome della classe="App">
<intestazionenome della classe="Intestazione app">
<h1>Accesso riuscitoh1>
<h2>{nome utente}h2>
<immsrc={avatar} />
<pulsanteal clic={()=> signOutUser()}>Escipulsante>
intestazione>
div>
 );
}
esportarepredefinito Successo;

Analizziamolo:

  • Inizializza un client Supabase con le variabili di ambiente: l'URL del tuo progetto e la tua chiave anonima pubblica nel file ENV.
  • Utilizzo Hook di React.js, useState e useEffect, per ottenere dati dalla risposta API.
  • L'hook useEffect implementa una funzione asincrona che chiama il metodo supabase.auth.getUser. Questo metodo recupera le informazioni sull'utente associate alla sessione dell'utente corrente.
  • La funzione asincrona controlla quindi se i dati utente esistono e li imposta sulla variabile di stato se lo fanno.
  • La funzione signOutUser utilizza il metodo supabase.auth.signOut per disconnettere l'utente e riportarlo alla pagina di accesso quando fa clic sul pulsante di disconnessione.
  • Infine, restituisci un div con alcune informazioni sull'utente.

5. Configurare i Page Route

Infine, configura i percorsi per entrambe le pagine di accesso e di successo.

Nel file app.js, aggiungi il codice seguente:

importare Reagire da'reagire';
importare {BrowserRouter COME Router, Percorsi, Percorso } da'reagire-router-dom';
importare Login da'./pagine/Accesso';
importare Successo da'./pagine/successo';
funzioneApp() {
ritorno (
<Router>
//Definisci i percorsi
"/" elemento={} />
"/successo" elemento={} />
Itinerari>
Router>
 );
}
esportarepredefinito Applicazione;

Analizziamolo:

  • Definisci i due percorsi: un percorso per la pagina di accesso e un percorso per la pagina di successo utilizzando i componenti Router dalla libreria react-router.
  • Imposta i percorsi di instradamento rispettivamente su '/' e '/success' e assegna i componenti Login e Success ai rispettivi instradamenti.
  • Infine, esegui questo comando sul tuo terminale per avviare il server di sviluppo: 
 npm inizio
  • Navigare verso http://:localhost: 3000 sul tuo browser per visualizzare il risultato. Il componente di accesso esegue il rendering dell'interfaccia utente React-auth di Supabase sia con i provider di posta elettronica che con quelli di Google.

Puoi autenticarti utilizzando Google o registrarti con la tua e-mail e password e utilizzare queste credenziali per accedere. Il vantaggio di utilizzare i provider di accesso social di Supabase o il provider di posta elettronica è che non devi preoccuparti della logica di registrazione.

Una volta che un utente si registra con un social provider o con un'e-mail e una password, i dati verranno archiviati nel database utenti Auth di Supabase per il tuo progetto. Quando accedono utilizzando le proprie credenziali, Supabase convaliderà i dettagli rispetto alle credenziali utilizzate per l'iscrizione.

Supabase semplifica l'autenticazione in React

Supabase offre una suite completa di funzionalità oltre all'autenticazione, come hosting di database, accesso API e streaming di dati in tempo reale. Offre inoltre funzionalità come il generatore di query e la visualizzazione dei dati per aiutare gli sviluppatori a creare e gestire le loro applicazioni in modo più efficiente.

Con la sua dashboard intuitiva e la robusta API, Supabase è un potente strumento per la creazione di applicazioni scalabili e sicure.