Alex Sign On

A JavaScript library that lightly wraps @auth0/auth0-spa-js with Jellyvision's IdP configurations.

Installation

npm install --save @jellyvision/alex-sign-on

Usage

This library is not compiled. When you install this package, you are getting raw, unmodified JavaScript that you may include in your project at your discretion.

index.js

import { Auth0Provider } from 'alex-sign-on/src/index.js';
// Contains the IdP domain and application clientId from Auth0
import authConfig from './auth_config.json';

const onRedirectCallback = appState => {
  history.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.pathname
  );
};

ReactDOM.render(
  <Auth0Provider
    domain={authConfig.domain}
    client_id={authConfig.clientId}
    redirect_uri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById('root')
);

LoginButton.js

import { useAuth0 } from 'alex-sign-on/src/index.js';

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return (
    <Button
      onClick={() => loginWithRedirect({
        appState: {
          targetUrl: '/jellyvision/2020#medical'
        }
      })}
    >
      Log in
    </Button>
  );
}

Interested in other functionality, like directing logging out, handling the user's information, and more? Head over to example/ and follow the README to get a react app running with all of features in this library.

Local Development

If you want to make modifications to this library, and want to test the changes locally in your application before cutting a new version, you must temporarily:

1. Install these dependencies so your app can run uncompiled jsx:

npm install react-app-rewired customize-cra --save-dev

2. Copy example/config-overrides.js to the root directory of your project.

3. Start your dev server with:

react-app-rewired start