在react / react-native应用程序的任何地方添加auth保护

2) Show a "welcome user" or a Login button

Now, in any arbitrary component, like a Header, you can check if the user is currently logged in. Typically you would use this for either showing a "welcome" label or a login button.

import {AuthConsumer} from 'react-check-auth'; const Header = () => (

3) Redirect not-logged in users to /login

You can mix and match react-check-auth with other declarative components like routing:

import {AuthConsumer} from 'react-check-auth'; const Main = () => ( ); const Home = () => { return ( {({userInfo}) => { // Redirect the user to login if they are not logged in if (!userInfo) { return (); } // Otherwise render the normal component else { return (

Usage guide

I. Backend requirements

These are the backend requirements that are assumed by react-check-auth.

1) API endpoint to return user information

An API request to fetch user information. It should take a cookie, or a header or a body for current session information.

For example:

GET https://my-backend.com/api/userContent-Type: application/jsonCookie: <...>Authorization: Bearer <...>

2) Success or logged-in response

If the user is logged in, the API should return a 200 status code with a JSON object.

For example:

{ "username": "iamuser", "id": 123}

3) Not logged-in response

If the user is not logged-in, the API should return a non 200 status code:

For example:

Status: 403

II. Installation

$ npm install --save react-check-auth

III. Set up AuthProvider

The AuthProvider component should be at the top of the component tree so that any other component in the app can consume the userInfo information.

The AuthProvider takes a required prop called authUrl and an optional prop called reqOptions.

authUrl :: String

Should be a valid HTTP endpoint. Can be an HTTP endpoint of any method.

reqOptions :: Object || Function

Should be or return a valid fetch options object as per https://github.github.io/fetch/#options.

Note: This is an optional prop that does not need to be specified if your authUrl endpoint is a GET endpoint that accepts cookies.

Default value that ensures cookies get sent to a GET endpoint:

{ "method": "GET", "credentials": "include", "headers": { "Content-Type": "application/json" }, }

Example 1: Use a GET endpoint with cookies

import React from 'react'; import {AuthProvider} from 'react-check-auth'; const authUrl = "https://my-backend.com/verifyAuth"; const App = () => ( // The rest of your app goes here );

Example 2: Use a GET endpoint with a header

import React from 'react'; import {AuthProvider} from 'react-check-auth'; const authUrl = "https://my-backend.com/verifyAuth"; const reqOptions = { 'method': 'GET', 'headers': { 'Content-Type': 'application/json', 'Authorization' : 'Bearer ' + window.localStorage.myAuthToken }, }; const App = () => ( // The rest of your app goes here );

Example 3: Use a POST endpoint with updated token

import React from 'react'; import {AuthProvider} from 'react-check-auth'; const authUrl = "https://my-backend.com/verifyAuth"; const reqOptions = () => { 'method': 'POST', 'headers': { 'Content-Type': 'application/json', 'Authorization' : 'Bearer ' + window.localStorage.myAuthToken }, }; const App = () => ( // The rest of your app goes here );

IV. Consuming auth state with

Any react component or element can be wrapped with an to consume the latest contextValue. You must write your react code inside a function that accepts the latest contextValue. Whenver the contextValue is updated then the AuthComponent is automatically re-rendered.

For example,

{(props) => { props.userInfo = {..} // returned by the API props.isLoading = true/false // if the API has not returned yet props.error = {..} // if the API returned a non-200 or the API call failed }}

props.userInfo :: JSON

If the API call returned a 200 meaning that the current session is valid, userInfo contains as returned by the API.

If the API call returned a non-200 meaning that the current session is absent or invalid, userInfo is set to null.

props.isLoading :: Boolean

If the API call has not returned yet, isLoading: true. If the API call has not been made yet, or has completed then isLoading: false.

props.error :: JSON

If the API call returned a non-200 or there was an error in making the API call itself, error contains the parsed JSON value.

V. Refresh state (eg: logout)

If you implement a logout action in your app, the auth state needs to be updated. All you need to do is call the refreshAuth() function available as an argument in the renderProp function of the AuthConsumer component.

For example:

{(refreshAuth) => ( refreshAuth() ); }}> Logout

This will re-run the call to authUrl and update all the child components accordingly.

VI. Using with React Native

Usage with React Native is exactly the same as with React. However you would typically use a Authorization header instead of cookies. Here's a quick example:

import { AuthProvider, AuthConsumer } from 'react-vksci123';export default class App extends Component { render() { const sessionToken = AsyncStorage.getItem("@mytokenkey"); const reqOptions = { "method": "GET", "headers": sessionToken ? { "Authorization" : `Bearer ${sessionToken}` } : {} } return ( Welcome to React Native! {({isLoading, userInfo, error}) => { if (isLoading) { return (); } if (error) { return ( Unexpected ); } if (!userInfo) { return (); } return (); }} ); }}

Plug-n-play with existing auth providers

All Auth backend providers provide an endpoint to verify a "session" and fetch user information. This component was motivated from creating documentation for integrating Hasura's auth backend into a react app with minimum boilerplate. That said this package is meant to be used with any auth provider, including your own.

Hasura

Hasura's Auth API can be integrated with this module with a simple auth get endpoint and can also be used to redirect the user to Hasura's Auth UI Kit in case the user is not logged in.

// replace CLUSTER_NAME with your Hasura cluster name. const authEndpoint = 'https://auth.CLUSTER_NAME.hasura-app.io/v1/user/info'; // pass the above reqObject to CheckAuth { ({ isLoading, userInfo, error }) => { // your implementation here } }

Read the docs here.

Firebase

CheckAuth can be integrated with Firebase APIs.

// replace API_KEY with your Firebase API Key and ID_TOKEN appropriately. const authUrl = 'https://googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=[API_KEY]'; const reqObject = { 'method': 'POST', 'payload': {'idToken': '[ID_TOKEN]'}, 'headers': {'content-type': 'application/json'}}; // pass the above reqObject to CheckAuth { ({ isLoading, userInfo, error }) => { // your implementation here } }

Custom Provider

CheckAuth can be integrated with any custom authentication provider APIs.

Lets assume we have an endpoint on the backend /api/check_token which reads a header x-access-token from the request and provides with the associated user information

const authEndpoint = 'http://localhost:8080/api/check_token'; const reqOptions = { 'method': 'GET', 'headers': { 'Content-Type': 'application/json', 'x-access-token': 'jwt_token' } }; { ( { isLoading, userInfo, error, refreshAuth }) => { if ( !userInfo ) { return ( Please login ); } return ( Hello { userInfo ? userInfo.username.name : '' } ); }}

It will render as Please login if the user's token is invalid and if the token is a valid one it will render Hello username

How it works

The AuthProvider component uses the authUrl and reqOptions information given to it to make an API callWhile the API call is being made, it sets the context value to have isLoading to true.

{ "userInfo": null, "isLoading": true, "error": null}

Once the API call returns, in the context value isLoading is set to `false' and:Once the API call returns, if the user is logged in, the AuthProvider sets the context to userInfo:

{ "userInfo": , "isLoading": false, "error": null}

If the user is not logged in, in the context value, userInfo is set to null and error is set to the error response sent by the API, if the error is in JSON.

{ "userInfo": null, "isLoading": false, "error": }

If the API call fails for some other reason, error contains the information

{ "userInfo": null, "isLoading": false, "error": }

Whenever the contextValue is updated, any component that is wrapped with AuthConsumer will be re-rendered with the contextValue passed to it as an argument in the renderProp function:

{ ({userInfo, isLoading, error}) => { return (...); }}

Contributing

Clone repo

git clone https://github.com/hasura/react-check-auth.git

Install dependencies

npm install or yarn install

Start development server

npm start or yarn start

Runs the demo app in development mode.

Open http://localhost:3000 to view it in the browser.

Source code

The source code for the react components are located inside src/lib.

Demo app

A demo-app is located inside src/demo directory, which you can use to test your library while developing.

Testing

npm run test or yarn run test

Build library

npm run build or yarn run build

Produces production version of library under the build folder.

Maintainers

This project has come out of the work at hasura.io. Current maintainers @Praveen, @Karthik, @Rishi.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。