ReactAuth
This library wraps the interface provided by the authentication
OC. It allows for a seamless integration with react.
How to use it?
- Install the library
npm i -S @guestlinelabs/react-auth
- Wrap you application/OC in the
AuthProvider
import React from 'react';
import { AuthProvider } from '@guestlinelabs/react-auth';
import App from './App';
export default () => {
return (
<AuthProvider>
<App />
</AuthProvider>
);
};
- Use the hook exposed by the library
import React from 'react';
import { useAuth } from '@guestlinelabs/react-auth';
export default () => {
const authResult = useAuth();
if (authResult.isLoading) {
return <p>Loading...</p>;
}
if (!authResult.isAuthenticated) {
return <p>You are not logged in...</p>;
}
return (
<div>
<p>accessToken: {authResult.accessToken}</p>
<p>idToken: {authResult.idToken}</p>
<p>userInfo: {JSON.stringify(authResult.userInfo)}</p>
</div>
);
};
Payload
The hook will return this payload:
type UseAuth = () => {
isLoading: boolean;
isAuthenticated: boolean;
error: Error | null;
accessToken: string | null;
idToken: string | null;
userInfo: UserInfo | null;
loginWithRedirect: LoginFunction;
handleRedirectCallback: HandleLoginCallBackFunction;
logout: LogoutFunction;
};
Please refer to the types in the library for more details.
Contributing
Please contact Sugoi team and send a PR.
Running it locally
- Run
npm ci
in the react-auth directory - Run
npm run build
in the react-auth directory to build it - Run
npm link
in the react-auth directory to make it globally available in your machine - Run
npm link @guestlinelabs/react-auth
in your application's directory so it uses your local build - Run
npm run build
once you have made changes to your application uses your new code
Testing
- Run
npm ci
in the react-auth directory - Run
npm test
in the react-auth directory to start the tests
How to publish new version
From react-auth
folder
npm login
use your username from npm.js, you need to be part of guestlinelabs organisationnpm ci
npm publish