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

Infra providerOne-click linkAdditional information
Railway.appDeploy on Railwaydocs
HerokuDeploy to Herokudocs
Renderrender buttondocs

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 and DATABASE_NAME are only configurable via platform envs

Step 3 - Install package

Install @authorizerdev/authorizer-react library

npm i --save @authorizerdev/authorizer-react
OR
yarn 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.