authorizer-react

Code Sandbox Demo: https://codesandbox.io/s/authorizer-demo-qgjpw

Step 1 - Create an Authorizer instance

Step 2 - Install package

npm i --save @authorizerdev/authorizer-react
# or
yarn add @authorizerdev/authorizer-react

Step 3 - Import styles

// In your entry file (index.js, App.js, _app.js, etc.)
import '@authorizerdev/authorizer-react/styles.css';

:root {
  --authorizer-primary-color: #3b82f6;
  --authorizer-primary-disabled-color: #60a5fa;
  --authorizer-danger-color: #dc2626;
  --authorizer-success-color: #10b981;
  --authorizer-text-color: #374151;
  --authorizer-fonts-font-stack: -apple-system, system-ui, sans-serif;
  --authorizer-fonts-medium-text: 14px;
  --authorizer-radius-button: 5px;
  --authorizer-radius-input: 5px;
}

Step 4 - Configure provider and use components

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',
      }}
      // optional — 'graphql' (default) or 'rest'
      protocol="graphql"
    >
      <LoginSignup />
      <Profile />
    </AuthorizerProvider>
  );
};

const LoginSignup = () => {
  return <Authorizer />;
};

const Profile = () => {
  const { user } = useAuthorizer();
  if (user) {
    return <div>{user.email}</div>;
  }
  return null;
};

AuthorizerProvider props

config fields

Local Development

# Build in watch mode
npm start

# Run the example app in another terminal
cd example
npm i
npm start

# One-off build
npm run build

# Tests
npm test

# Storybook
npm run storybook
npm run build-storybook

# Bundle analysis
npm run size
npm run analyze

Release