@contentchef/auth0-react

@contentchef/auth0-react

Install

npm i --save @contentchef/auth0-react
# or
yarn add @contentchef/auth0-react

Components

Auth0Provider

// in your main application file
import { Auth0Provider } from '@contentchef/auth0-react';
import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './MyApp';

ReactDOM.render(
  <Auth0Provider
    audience="your-api-audience"
    clientID="your-auth0-client-id"
    domain="your-application-domain"
    redirectUri="/path/to/callback-component"
    responseMode="token"
    responseType="token id_token"
    scope="openid profile email"
  >
    <MyApp />
  </Auth0Provider>
, document.getElementById('app'));

Auth0Callback

import React from 'react';
import { Auth0Callback } from '@contentchef/auth0-react';

const requestEndHandler = (error, decodedAuthToken) => {
  if (error) {
    return history.pushState(error, undefined, '/error-route')
  }

  return history.pushState(null, undefined, '/');
};

export default () => (
  <Auth0Callback onAuthenticationEnd={requestEndHandler}>
    <h1>You are logging in...</h1>
    <p>You will be redirected in seconds</p>
  </Auth0Callback>
)

Authorized/Unauthorized

import React from 'react';
import { Authorized, Unauthorized } from '@contentchef/auth0-react';

export default () => (
  <div>
    <Authorized>
      You are authenticated
    </Authorized>
    <Unauthorized>
      You are not authenticated
    </Unauthorized>
  </div>
)

Login/Logout button

import React from 'react';
import { Authorized, Unauthorized, withUser, IWithUserProps } from '@contentchef/auth0-react';

export default withUser()(({ user }: IWithUserProps) => (
  <div>
    <Authorized>
      Hello { user.name }, <LogoutButton>logout</LogoutButton>
    </Authorized>
    <Unauthorized>
      Hello, <LoginButton>logout</LoginButton>
    </Unauthorized>
  </div>
))

withAuthentication

// in your components/hocs/containers/...
import React from 'react';
import { withAuthentication, LoginButton } from '@contentchef/auth0-react';

export const OnlyAuthUsers = withAuthentication(true)(() => (
  <div>
    <div>
      Hello! You will see this only if authenticated.
    </div>
  </div>
))

export const OnlyUnAuthUsers = withAuthentication(false)(() => (
  <div>
    <div>
      Hello! You are not logged in, please
      <LoginButton>Login</LoginButton> before proceeding
    </div>
  </div>
))

withUser

// in your components/hocs/containers/...
import React from 'react';
import { Authorized, Unauthorized, withUser, IWithUserProps } from '@contentchef/auth0-react';

export default withUser()(({ user }: IWithUserProps) => (
  <div>
    <Authorized>
      Hello { user.name }, <LogoutButton>logout</LogoutButton>
    </Authorized>
    <Unauthorized>
      Hello, <LoginButton>logout</LoginButton>
    </Unauthorized>
  </div>
));