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 provider	One-click link	Additional information
Railway.app		docs
Heroku		docs
Render		docs

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.