https://github.com/streamich/react-passport
React context for client-passport
https://github.com/streamich/react-passport
Last synced: 11 months ago
JSON representation
React context for client-passport
- Host: GitHub
- URL: https://github.com/streamich/react-passport
- Owner: streamich
- License: unlicense
- Created: 2018-11-26T19:10:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T02:35:30.000Z (over 2 years ago)
- Last Synced: 2025-07-31T15:59:40.876Z (11 months ago)
- Language: TypeScript
- Size: 1.01 MB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-passport
- Client-side authentication for React
- React context for [`client-passport`](https://github.com/streamich/client-passport)
- Provides Hooks API
## Installation
Instal `react-passport` and `client-passport` packages.
```shell
yarn add client-passport react-passport
```
## Usage
First create an `authenticator` instance.
```js
import {passport} from 'client-passport';
import {loader as googleLoader} from 'client-passport/lib/providers/google';
import {loader as facebookLoader} from 'client-passport/lib/providers/facebook';
const authenticator = passport({
providers: {
google: async () => ({
loader: googleLoader,
options: {
client_id: '305188012168-htfit0k0u4vegn0f6hn10rcqoj1m77ca.apps.googleusercontent.com',
},
}),
facebook: () => ({
loader: facebookLoader,
options: {
appId: '253302651812049',
autoLogAppEvents: true,
xfbml: true,
version: 'v3.2',
}
}),
}
});
```
Now use `react-passport` to create React context.
```js
import createAuthenticatorContext from 'react-passport';
const {Provider, Consumer, context, useAuth} = createAuthenticatorContext(authenticator);
```
Now you can use it as React context.
```jsx
{({loading, user, auth}) => {
// ...
}}
```
Where
- `loading` — is a boolean indicating whether `authenticator` itself is loading.
- `auth` — is the instance of `authenticator`, you can use it for signing in/out `auth.signIn('google')` and `auth.signOut()`.
- `user` — is `null` if user is not authenticated or an instance of `User` object if user is authenticated. You can use it as `user.name`, `user.avatar`, `user.token` etc.
You can also use this library with React hooks.
```js
const MyComponent = () => {
const {loading, user, auth} = useAuth();
// ...
};
```
## License
[Unlicense](LICENSE) — public domain.