Getting Started
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.
Step 1: Get Authorizer Instance
Deploy production ready Authorizer instance using one click deployment options available below
For more information check docs
Step 2: Setup Instance
- Open authorizer instance endpoint in browser
- Sign up as an admin with a secure password
- Configure environment variables from authorizer dashboard. Check env docs for more information
Note:
DATABASE_URL
,DATABASE_TYPE
andDATABASE_NAME
are only configurable via platform envs
Step 3 - Install package
Install @authorizerdev/authorizer-react
library
npm i --save @authorizerdev/authorizer-reactORyarn add @authorizerdev/authorizer-react
Step 4 - Configure Provider and use Authorizer Components
Authorizer 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', // obtain your client id from authorizer dashboard extraHeaders: {}, // Optional JSON object to pass extra headers in each authorizer requests. }} > <LoginSignup /> <Profile /> </AuthorizerProvider> )}const LoginSignup = () => { return <Authorizer />}const Profile = () => { const { user } = useAuthorizer() if (user) { return <div>{user.email}</div> } return null}
Examples
Please check the example repo to see how to use this component library.