Authorizer React 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 - Create Instance

Get Authorizer URL by instantiating Authorizer instance and configuring it with necessary environment variables.

Step 2 - Install package

Install @authorizerdev/authorizer-react library

npm i --save @authorizerdev/authorizer-react
OR
yarn add @authorizerdev/authorizer-react

Step 3 - 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,
      }}
    >
      <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.