Authorizer React SDK allows you to implement authentication in your React application quickly. It also allows you to access the user profile.
Here is a quick guide on getting started with @authorizerdev/authorizer-react package.
Code Sandbox Demo: https://codesandbox.io/s/authorizer-demo-qgjpw
Get Authorizer URL by instantiating Authorizer instance and configuring it with necessary environment variables.
Install @authorizerdev/authorizer-react library
npm i --save @authorizerdev/authorizer-react
OR
yarn add @authorizerdev/authorizer-reactAuthorizer comes with react context which serves as Provider component for the application
import {
AuthorizerProvider,
Authorizer,
useAuthorizer,
} from '@authorizerdev/authorizer-react';
const App = () => {
return (
<AuthorizerProvider
config={{
authorizerURL: 'http://localhost:8080',
redirectURL: window.location.origin,
clientID: 'YOUR_CLIENT_ID',
}}
>
<LoginSignup />
<Profile />
</AuthorizerProvider>
);
};
const LoginSignup = () => {
return <Authorizer />;
};
const Profile = () => {
const { user } = useAuthorizer();
if (user) {
return <div>{user.email}</div>;
}
return null;
};The recommended workflow is to run authorizer in one terminal:
npm start # or yarn startThis builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.
Then run either Storybook or the example playground:
Then run the example inside another:
cd example
npm i # or yarn to install dependencies
npm start # or yarn startThe default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.
To do a one-off build, use npm run build or yarn build.
To run tests, use npm test or yarn test.
Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.
Jest tests are set up to run with npm test or yarn test.
Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent