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）}