useAuth
v2.0.0
useAuth 、迅速にセットアップできるように設計されています。 Auth0またはNetlify IDと適切なアクセスキーを使用したアカウントが必要です。
$ yarn add react-use-auth
NPMからのダウンロード、Package.jsonなどに追加されます。NPMも使用できます。
useAuth 、独自の認証クライアントをインストールしません。代わりに、それらはピア依存関係としてマークされています。
使用したいものに応じて、 auth0-jsまたはnetlify-identity-widgetをインストールします。もうすぐ来る:)
$ yarn add auth0-js
または
$ yarn add netlify-identity-widget
使用していないクライアントのピア依存関係の欠落に関する警告が表示されます。大丈夫です。
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、NextJS、Reactルーターでテストしました。何でもうまくいくはずです。
authProvider - 認証プロバイダーへのUSEAUTHインターフェイス。
params - 認証プロバイダーのパラメーター
useAuthクライアントラッパーは、スマートデフォルトを提供します。
Auth0で使用されている各クライアントにカスタム構成を使用し、Netlify IDで使用する詳細を詳細にします。これがどのように機能するかを学ぶには、認証プロバイダーを作成してください
PS：auth0ドメインとclientidを使用して、 useAuthが自分に適しているかどうかを確認してください。だから彼らはコードスニペットに見えるのですか？
Auth0および他のほとんどの認証プロバイダーはOAuthを使用しています。これには、ユーザーをログインフォームにリダイレクトする必要があります。ログイン後、プロバイダーはユーザーをアプリにリダイレクトします。
Netlify IDを使用してこの手順をスキップできます。ページのポップアップを使用します。
Reactページを作成する方法は機能するはずです。これは私がギャツビーに使用するコードです。
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 Paramを渡して、別のページにリダイレクトできます。
Auth0構成の有効なコールバックURLとして<domain>/auth0_callbackを追加してください。
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]
貢献、問題、機能のリクエストは大歓迎です！
[問題]ページを自由に確認してください。
他の認証プロバイダーをサポートしたいと考えています。助けてください:)
このプロジェクトがあなたを助けたなら、♥を与えてください！
Copyright©2019 Swizec Teller [email protected]。
このプロジェクトはMITライセンスです。
このREADMEは、readme-md-generatorによって❤️で生成されました
これらの素晴らしい人々に感謝します（絵文字キー）：
デジャン | ジェイソン・ミラー | グラハムバーバー | Mateus gabi | ホルヘ・ガラット | スイゼックテラー ？ | ニック・リッチモンド |
Ollie Monk | ヘンリック・ウェンツ ？ | マックス・シェブ | ジョエル・バートレット | Siddik Mehdi | ジェス ？ | ホルヘ・クアドラ |
ØyvindMarthinsen | フレドリック・ソガード | Artem Rudenko | Travers Pinkerton | エリック・ホッジス | デヴィン・フィッツシモンズ | ジェイソンラスター ？ |
パトリック・アルミニオ |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
