Unduh useAuth - Unduh Kode Sumber useAuth

useAuth

Kode Sumber AI

v2.0.0

Unduh

Useauth

Cara tercepat untuk menambahkan otentikasi ke aplikasi React Anda

Memulai

useAuth dirancang agar cepat diatur. Anda akan memerlukan akun dengan AUTH0 atau Netlify Identity dan kunci akses yang sesuai.

1. Pasang kait

 $ yarn add react-use-auth

Unduhan dari NPM, menambah paket Anda, dll. Anda juga dapat menggunakan NPM.

2. Instal klien auth Anda

useAuth tidak menginstal klien otentikasi sendiri. Sebaliknya mereka ditandai sebagai dependensi sebaya.

Instal auth0-js atau netlify-identity-widget tergantung pada apa yang ingin Anda gunakan. Lebih banyak datang segera :)

 $ yarn add auth0-js

atau

 $ yarn add netlify-identity-widget

Anda akan melihat peringatan tentang dependensi rekan yang hilang untuk klien yang tidak Anda gunakan. Tidak apa -apa.

3. Konfigurasikan dengan authconfig

useAuth menggunakan komponen <AuthConfig> untuk mengonfigurasi klien otentikasi Anda. Kami menggunakan XState di belakang layar untuk mengelola keadaan otentikasi untuk Anda.

Pastikan AuthConfig merender di setiap halaman.

Dengan Gatsby, tambahkan ke gatsby-browser.js . Dengan NextJS, _app.js adalah yang terbaik. Anda tidak perlu membungkus pohon komponen Anda, tetapi Anda bisa jika Anda mau. Kami memastikan Useauth tidak merusak rendering sisi server. ✌️

 // gatsby-browser.js
import * as React from "react" ;
import { navigate } from "gatsby" ;

import { AuthConfig } from "react-use-auth" ;
import { Auth0 } from "react-use-auth/auth0" ;

export const wrapRootElement = ( { element } ) => (
    < >
        < AuthConfig
            navigate = { navigate }
            authProvider = { Auth0 }
            params = { {
                domain : "useauth.auth0.com" ,
                clientID : "GjWNFNOHqlino7lQNjBwEywalaYtbIzh"
            } }
        />
        { element }
    </ >
) ;

<AuthConfig> menginisialisasi mesin XState State global, mengatur klien AUTH0, dan memvalidasi sesi pengguna pada setiap beban. Anda sekarang memiliki akses mudah ke otentikasi di seluruh aplikasi Anda :)

Opsi konfigurasi adalah:

navigate - Fungsi navigasi Anda, digunakan untuk pengalihan. Diuji dengan Gatsby, NextJS, dan React Router. Apapun harus berhasil.
authProvider - Antarmuka UseAuth ke penyedia otentikasi Anda.
params - Parameter untuk penyedia otentikasi Anda

Pembungkus klien useAuth memberikan default yang cerdas.

Detail lebih lanjut tentang penggunaan konfigurasi khusus untuk setiap klien yang digunakan dengan AUTH0, dan gunakan dengan identitas Netlify. Untuk mempelajari tentang cara kerjanya, buka pembuatan penyedia auth

PS: Jangan ragu untuk menggunakan domain AUTH0 saya dan ClientID untuk melihat apakah useAuth cocok untuk Anda. Itu sebabnya mereka terlihat di cuplikan kode?

4. Buat halaman panggilan balik

AUTH0 dan sebagian besar penyedia otentikasi lainnya menggunakan OAuth. Itu membutuhkan pengalihan pengguna Anda ke formulir login mereka. Setelah login, penyedia mengarahkan pengguna kembali ke aplikasi Anda.

Anda dapat melewatkan langkah ini dengan identitas netlify. Menggunakan popup dalam halaman.

Apa pun cara membuat halaman bereaksi harus berfungsi, inilah kode yang saya gunakan untuk Gatsby:

 import * as React from "react"
import { useAuth } from "react-use-auth"

const Auth0CallbackPage = ( ) => {
    const { handleAuthentication } = useAuth ( )
    React . useEffect ( ( ) => {
        handleAuthentication ( )
    } , [ handleAuthentication ] )

    return (
        < h1 >
            This is the auth callback page,
            you should be redirected immediately!
        </ h1 >
    )
}

export default Auth0CallbackPage

Tujuannya adalah untuk memuat halaman, secara singkat menunjukkan beberapa teks, dan menjalankan metode handleAuthentication dari useAuth pada pemuatan halaman.

Metode itu akan membuat cookie di penyimpanan lokal dengan informasi pengguna Anda dan mengarahkan kembali ke beranda. Anda dapat melewati param postLoginRoute untuk mengarahkan kembali ke halaman yang berbeda.

Pastikan Anda menambahkan <domain>/auth0_callback sebagai URL panggilan balik yang valid di konfigurasi auth0 Anda.

5. Nikmati Useauth

Anda siap menggunakan useAuth untuk otentikasi di aplikasi React Anda. ?

Berikut adalah tombol login misalnya:

 const Login = ( ) => {
    const { isAuthenticated , login , logout } = useAuth ( ) ;

    if ( isAuthenticated ( ) ) {
        return < Button onClick = { logout } > Logout </ Button > ;
    } else {
        return < Button onClick = { login } > Login </ Button > ;
    }
} ;

isAuthenticated adalah metode yang memeriksa apakah cookie pengguna masih valid.

login dan logout memicu tindakan masing -masing.

Anda bahkan dapat menyapa pengguna Anda:

 // src/pages/index.js

const IndexPage = ( ) => {
  const { isAuthenticated , user } = useAuth ( )

  return (
    < Layout >
      < SEO title = "Home" />
      < h1 > Hi { isAuthenticated ( ) ? user . name : "people" } </ h1 >
  )
}

Periksa isAuthenticated lalu gunakan objek user . ✌️

Untuk dokumen lebih rinci, kunjungi Useauth.dev

Anda dapat mencobanya di sini https://gatsby-useAuth-example.now.sh/

Pengarang

? Swizec teller [email protected]

GitHub: @swizec
Twitter: @swizec
Blog: swizec.com/blog

? Berkontribusi

Kontribusi, masalah, dan permintaan fitur dipersilakan!
Jangan ragu untuk memeriksa halaman masalah.

Saya ingin mendukung penyedia otentikasi lainnya. Tolong bantu :)

Tunjukkan dukungan Anda

Berikan ️ jika proyek ini membantu Anda!

Lisensi

Readme ini dihasilkan dengan ❤️ oleh readme-md-generator

Kontributor

Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):

_Dejan	_{Jason Miller}	_{Graham Barber}	_{Mateus Gabi}	_{Jorge Galat}	_{Swizec Teller} ?	_{Nick Richmond}
_{Ollie Monk}	_{Henrik Wenz} ?	_{Max Chehab}	_{Joel Bartlett}	_{Siddik Mehdi}	_Jess ?	_{Jorge Cuadra}
_{Øyvind Marthinsen}	_{Fredrik Søgaard}	_{Artem Rudenko}	_{Travers Pinkerton}	_{Eric Hodges}	_{Devin Fitzsimons}	_{Jason Laster} ?
_{Patrick Arminio}