@guestlinelabs/react-auth

ReactAuth

This library wraps the interface provided by the authentication script. It allows for a seamless integration with react. Authentication OC has been deprecated, and now you should use the new /authentication endpoint in the OC Registry.

How to use it?

1. Install the library

npm i -S @guestlinelabs/react-auth

1. Wrap you application/OC in the AuthProvider

import React from 'react';
import { AuthProvider } from '@guestlinelabs/react-auth';

import App from './App';

export default () => {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
};

1. Use the hook exposed by the library

import React from 'react';
import { useAuth } from '@guestlinelabs/react-auth';

export default () => {
  const authResult = useAuth();

  if (authResult.isLoading) {
    return <p>Loading...</p>;
  }

  if (!authResult.isAuthenticated) {
    return <p>You are not logged in...</p>;
  }

  return (
    <div>
      <p>accessToken: {authResult.accessToken}</p>
      <p>idToken: {authResult.idToken}</p>
      <p>userInfo: {JSON.stringify(authResult.userInfo)}</p>
    </div>
  );
};

Payload

The hook will return this payload:

type UseAuth = () => {
  isLoading: boolean;
  isAuthenticated: boolean;
  error: Error | null;
  accessToken: string | null;
  idToken: string | null;
  userInfo: UserInfo | null;

  // Those functions are mostly for the use of the Applications. Open components might use those functions in rare case, for example the logout function in the NavBar
  loginWithRedirect: LoginFunction;
  handleRedirectCallback: HandleLoginCallBackFunction;
  logout: LogoutFunction;
};

Please refer to the types in the library for more details.

Contributing

Please contact Sugoi team and send a PR.

Running it locally

1. Run npm ci in the react-auth directory
2. Run npm run build in the react-auth directory to build it
3. Run npm link in the react-auth directory to make it globally available in your machine
4. Run npm link @guestlinelabs/react-auth in your application's directory so it uses your local build
5. Run npm run build once you have made changes to your application uses your new code

Testing

1. Run npm ci in the react-auth directory
2. Run npm test in the react-auth directory to start the tests

How to publish new version

From react-auth folder

1. npm login use your username from npm.js, you need to be part of guestlinelabs organisation
2. npm ci
3. npm publish