Skip to content

Add a 'useCheckAuth' hook. #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -271,8 +271,22 @@ If the API call has not returned yet, `isLoading: true`. If the API call has not

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. Consuming auth state with `useCheckAuth()` hook

### V. Refresh state (eg: logout)
You can use `useCheckAuth()` hook. It returns the same values as `<AuthConsumer>`\`s render prop parameters.

For example,
```javascript
import {useCheckAuth} from "react-check-auth";

function User(props) {
const {userInfo, isLoading, error, refreshAuth} = useCheckAuth();

return {...}
}
```

### VI. 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.

Expand All @@ -294,7 +308,7 @@ For example:

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

### VI. Using with React Native
### VII. 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:

Expand Down
5 changes: 3 additions & 2 deletions src/lib/context.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const defaultState = {
refreshAuth: () => true
};

const { Provider, Consumer } = React.createContext(defaultState);
const AuthContext = React.createContext(defaultState);
const { Provider, Consumer } = AuthContext;

export { Provider, Consumer, defaultState };
export { AuthContext, Provider, Consumer, defaultState };
3 changes: 2 additions & 1 deletion src/lib/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import AuthProvider from './components/AuthProvider';
import AuthConsumer from './components/AuthConsumer';
import useCheckAuth from './useCheckAuthHook';

export { AuthProvider, AuthConsumer };
export { AuthProvider, AuthConsumer, useCheckAuth };
6 changes: 6 additions & 0 deletions src/lib/useCheckAuthHook.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {useContext} from 'react';
import {AuthContext} from './context';

export default function useCheckAuth () {
return useContext(AuthContext)
}