Skip to main content

Overview

This React Auth package provides components and tools which can be used to provide your application with authentication powered by Pangea's AuthN service.

Pangea's AuthN service allows you to build a cloud-based authentication flow to help your login, session, and user management align with your security requirements while matching the look and feel of your app. The components and utilities in this package help you manage your application authentication sessions and state with AuthN.

Installation​

Using npm

npm install @pangeacyber/react-auth

Using yarn

yarn add @pangeacyber/react-auth

Configure Pangea AuthN​

Enable the AuthN Service in the Pangea Console.

If you're using an existing application, verify that you have configured the following settings for AuthN:

  • Under "Auth Methods", ensure "Password" authentication is enabled.
  • Under "Redirects", configure a redirect that reflects the origin of your application. For local development that might be http://localhost:3000
  • In the "Auth Settings" section, enable "Allow Signups".

Take note of the Domain, Client Token and Hosted Login values in the "Configuration Details" panel on the "Overview" page. You'll need these values in the next step.

Basic Usage​

Add authentication by wrapping your application in the AuthProvider:

// src/index.js
import React from "react";
import { useNavigate } from "react-router-dom";
import { AuthProvider } from "@pangeacyber/react-auth";

const App = () => {
  const navigate = useNavigate();

  return (
    <AuthProvider
      loginUrl="YOUR_HOSTED_LOGIN_URL"
      config={{
        domain: "YOUR_PANGEA_DOMAIN",
        clientToken: "YOUR_CLIENT_TOKEN",
      }}
    >
      <App />
    </AuthProvider>
  );
};

Use the useAuth hook in your components to access authentication state.

// src/App.js
import React from "react";

import { useAuth } from "@pangeacyber/react-auth";

const App = () => {
  const { authenticated, loading, error, user, login, logout } = useAuth();
  const navigate = useNavigate();

  if (loading) {
    return <div>Loading</div>;
  } else if (error) {
    return <div>Error: {error}</div>;
  }

  if (authenticated) {
    return (
      <div>
        Logged in as {user.profile.first_name}
        <button onClick={logout}>Logout</button>
      </div>
    );
  } else {
    return (
      <div>
        <button onClick={login}>Login</button>
      </div>
    );
  }
};

export default App;

Configuration Options​

Required Configuration

  • loginUrl The URL of the hosted login page
  • config
    • domain The Pangea domain of the project
    • clientToken A Pangea client access token

Optional Configuration

Additional config object parameters

  • callbackUri The URI that the hosted page will redirect to after a login or logout. Defaults to window.location.origin.
  • useJwt Use JSON Web Tokens for authentication. The AuthN Service must all be configured to use JWTs.
  • sessionKey The key name used for session information. Defaults to pangea-session.

Cookie configuration cookieOptions parameters

  • useCookie The AuthProvider will store tokens using cookies and enable session sharing in a browser and across subdomains. Defaults to false.
  • cookieMaxAge The lifetime of session cookies in seconds. Defaults to 48 hours.
  • cookieName The name of the user token cookie. Defaults to pangea-token.
  • refreshCookieName The name of the refresh token cookie. Defaults to pangea-refresh.
  • cookieDomain The domain to set on the cookie.

Additional AuthProvider Props

  • onLogin A function to call on successful login. Defaults to undefined.
  • redirectPathname A path to append to the redirectUri on successful login. Defaults to undefined.
  • redirectOnLogout When set to true, redirect to the hosted login page on logout. Defaults to false.
  • useStrictStateCheck Verify the state value on login. Defaults to true.