useAuth下載 - useAuth源代碼下載

useAuth

Ai源碼

v2.0.0

下載

UseAuth

將身份驗證添加到您的React應用程序的最快方法

入門

useAuth旨在快速設置。您需要一個具有auth0或NetLify Identity和適當訪問密鑰的帳戶。

1。安裝鉤子

 $ yarn add react-use-auth

從NPM下載，添加到您的軟件包。 JSON等。您也可以使用NPM。

2。安裝您的驗證客戶端

useAuth不會安裝自己的身份驗證客戶端。相反，它們被標記為同伴依賴性。

根據您想要使用的內容，安裝auth0-js或netlify-identity-widget 。更多即將到來:)

 $ yarn add auth0-js

或者

 $ yarn add netlify-identity-widget

您會看到有關未使用的客戶端缺少同行依賴的警告。沒關係。

3。使用authconfig配置

useAuth使用<AuthConfig>組件來配置您的身份驗證客戶端。我們在幕後使用XSTATE為您管理身份驗證狀態。

確保每個頁面上的AuthConfig呈現。

使用Gatsby，將其添加到gatsby-browser.js中。使用nextjs， _app.js最好。您不需要包裝組件樹，但是如果您願意的話，可以。我們確保UseAuth不會破壞服務器端渲染。 ✌️

 // 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>初始化全局Xstate狀態計算機，設置Auth0客戶端，並在每個負載上驗證用戶會話。現在，您可以輕鬆訪問整個應用程序中的身份驗證:)

配置選項是：

navigate - 您的導航功能，用於重定向。使用Gatsby，NextJ和React路由器進行測試。任何事情都應該起作用。
authProvider - 您身份驗證提供商的USEAUTH接口。
params - 身份驗證提供商的參數

useAuth客戶包裝器提供智能默認值。

有關在Auth0中使用的每個客戶端使用自定義配置的更多詳細信息，並與NetLify Identity一起使用。要了解其工作原理，請去創建一個auth提供商

PS：隨時使用我的Auth0域和客戶端，看看useAuth是否適合您。這就是為什麼它們在代碼片段中可見的原因？

4。創建回調頁面

Auth0和大多數其他身份驗證提供商都使用OAuth。這需要將用戶重定向到其登錄表格。登錄後，提供商將用戶重定向回您的應用。

您可以使用NetLify身份跳過此步驟。它使用頁面內彈出窗口。

創建React頁面的任何方法都應起作用，這是我用於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

目的是加載頁面，簡要顯示一些文本，然後從頁面加載的useAuth運行handleAuthentication方法。

該方法將在本地存儲中創建一個cookie，其中包含用戶的信息，並將其重定向回主頁。您可以將postLoginRoute參數轉移到其他頁面。

確保將<domain>/auth0_callback添加為Auth0配置中的有效回調URL。

5。享受UseAuth

您準備在React應用中使用useAuth進行身份驗證。？

這是一個登錄按鈕：

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

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

isAuthenticated是一種檢查用戶的cookie是否仍然有效的方法。

login和logout觸發各自的動作。

您甚至可以向用戶打個招呼：

 // src/pages/index.js

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

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

檢查isAuthenticated然後使用user對象。 ✌️

有關更詳細的文檔，請訪問useauth.dev

您可以在這裡嘗試https://gatsby-useauth-example.now.sh/

作者

？ swizec teller [email protected]

github：@swizec
Twitter：@swizec
博客：swizec.com/blog

？貢獻

歡迎貢獻，問題和功能請求！
請隨時檢查問題頁面。

我希望支持其他身份驗證提供商。請幫助:)

表示您的支持

如果這個項目對您有所幫助，請給！

執照

此讀數是由readme-md generator生成的❤️

貢獻者

謝謝這些好人（表情符號鑰匙）：

_Dejan	_{傑森·米勒（Jason Miller）}	_{格雷厄姆理髮師}	_{Mateus Gabi}	_{豪爾赫·加拉特（Jorge Galat）}	_Swizec櫃員？	_{尼克·里士滿}
_奧利和尚	_{Henrik Wenz} ？	_{馬克斯·切哈}	_{喬爾·巴特利特（Joel Bartlett）}	_{Siddik Mehdi}	_傑西？	_{豪爾赫·庫德拉（Jorge Cuadra）}
_{ØVINDMARTHINSEN}	_{弗雷德里克·索加德（FredrikSøgaard）}	_{Artem Rudenko}	_{Travers Pinkerton}	_{埃里克·霍奇斯（Eric Hodges）}	_{德文·菲茨西蒙}	_{傑森·拉斯特（Jason Laster）} ？
_{帕特里克·阿米尼奧（Patrick Arminio）}