@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?

• Install the library

npm i -S @guestlinelabs/react-auth

• 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>
  );
};

• 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

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

Testing

• Run npm ci in the react-auth directory
• Run npm test in the react-auth directory to start the tests

How to publish new version

From react-auth folder

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