@guestlinelabs/react-auth
TypeScript icon, indicating that this package has built-in type declarations

4.3.2 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @guestlinelabs/react-auth

Weekly Downloads

308

Version

4.3.2

License

ISC

Unpacked Size

33.9 kB

Total Files

22

Last publish

Collaborators

  • jb-access
  • imperium02
  • davethemac
  • mkredz
  • dave-hillier
  • missbruni
  • rameshanandakrishnan
  • pbazydlo
  • guru_fordy
  • greg.plenzler
  • rachel.sinclair