react-passport
v1.1.0
Published
- Client-side authentication for React - React context for [`client-passport`](https://github.com/streamich/client-passport) - Provides Hooks API
Downloads
11
Readme
react-passport
- Client-side authentication for React
- React context for
client-passport
- Provides Hooks API
Installation
Instal react-passport
and client-passport
packages.
yarn add client-passport react-passport
Usage
First create an authenticator
instance.
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.
import createAuthenticatorContext from 'react-passport';
const {Provider, Consumer, context, useAuth} = createAuthenticatorContext(authenticator);
Now you can use it as React context.
<Provider>
<Consumer>{({loading, user, auth}) => {
// ...
}}</Consumer>
</Provider>
Where
loading
— is a boolean indicating whetherauthenticator
itself is loading.auth
— is the instance ofauthenticator
, you can use it for signing in/outauth.signIn('google')
andauth.signOut()
.user
— isnull
if user is not authenticated or an instance ofUser
object if user is authenticated. You can use it asuser.name
,user.avatar
,user.token
etc.
You can also use this library with React hooks.
const MyComponent = () => {
const {loading, user, auth} = useAuth();
// ...
};
License
Unlicense — public domain.