Add login using hosted pages

Learn how to add a login to your app using hosted pages

Pangea's AuthN Hosted Page is a customizable login page that allows you to sign in to your application using social login or a traditional username and password. It also provides multi-factor authentication to add an extra layer of security to user logins. The hosted page is designed to match the look and feel of your application, so you have a seamless experience when logging in.

Pangea's AuthN Hosted Page is easy to set up and customize using the intuitive dashboard branding functionality in the console, where you can upload your logo and choose the colors and fonts that match your brand. By using Pangea's Authn Hosted Page, you can provide a professional and secure login experience for your users without spending time and resources on building your login page.

Pangea's AuthN Quick Start guide enables you to swiftly familiarize yourself with the authentication capabilities of your application by utilizing hosted pages.

tip

How to use this guide

This guide assumes the following:

• You already have a React app that exists.
• You are using the information in this page to add AuthN capabilities to your app.
• You are writing a new app and want to test Pangea's AuthN flows and experience or build it for your application.

In the Pangea User Console

The first steps you need to take occur within the Pangea User Console .

Enable the service and create a token

When you enable the AuthN service, you will also create a token.

Expand for details

To enable the AuthN service and create a token:

1. Click AuthN on the left-hand navigation. A dialog with details about authentication will appear. Click Next.
2. You will be prompted to create a token to access the AuthN service. Click Next.
3. An additional dialog with token details will appear. Type a Token name and select an Expiration Date, or just keep the default values. Click Done.

The AuthN Overview page should appear.

Set a redirect

A redirect refers to a technique where you are redirected from one web page or application to another as part of the authentication process. This is often used when you attempt to access a protected resource on a website or application that requires authentication. The website or application will redirect you to a separate authentication service, such as an identity provider, where you can enter your credentials (for example, username and password) to prove your identity. Once you have successfully authenticated, the authentication service will redirect you back to the original website or application with an authorization token or session cookie that grants access to the requested resource. Redirects can help to ensure that authentication is performed securely and can help to simplify the authentication process for you by allowing them to use your existing credentials to access multiple services.

To set a redirect:

1. In the Pangea User Console , click General on the left-hand navigation menu.
2. Click Redirect Settings.
3. Click + Redirect. A dialog will appear asking you to enter a redirect URL.
4. Type the URL and click Save.

Configure your app for communication with Pangea

For your application to communicate with the Pangea service, you must set the following variables in your env file.

• token: Created when you first enable the AuthN service. This is the "Client Token" shown on the Pangea User Console's AuthN Overview page on the right-hand side.

note

• Do not include any AuthN tokens in your application other than the client token if the application is sent to a user's browser.
• If a non-client AuthN token is ever exposed it would allow anyone who has the token to create, delete, or alter users.

• domain: Generated when you create a project and indicates where your project is hosted. This is the "Domain" listed in the Pangea console's AuthN overview page on the right-hand side.
• redirect URL: The application is going to be loaded and run from a web page, and you must include a redirect URL back to the application. The redirect URL will have to be under the same domain as the application was loaded from. So for example, if the application was loaded from http://localhost:3000 then the callback should be something under that domain such as http://localhost:3000/mycb.

The values are available in the Pangea User Console . To access the variables:

1. Go to the Pangea User Console .
2. Click AuthN in the left-hand navigation.
3. The AuthN Overview page will appear. The domain and redirect URL should be visible on the right side of the screen. The token is available toward the bottom of the screen.
4. Copy the required variables, and move over to your codebase.

In your codebase

The following steps take place in your codebase and require you to create files.

Add variables to the env file

After you generate the variables in the Pangea User Console , take the values and create an env file in your application codebase. The required variables are listed in the configure your app for communication with Pangea page.

Your env file might look something like this:

REACT_APP_CLIENT_TOKEN={token}
REACT_APP_LOGIN_URL="{redirect url}"
REACT_APP_PROVIDER_API="{domain}"

note

If you’re not using a “Create React App” script, your variables might not have the REACT_APP prefixes seen above.

Example from sample app

If you’re following along using the Sample React App , you can find the .env.template file at the root level in the sample app.

The example env file looks something like this:

REACT_APP_CLIENT_TOKEN={PANGEA_TOKEN}
REACT_APP_LOGIN_URL="{AUTHN_LOGIN_URL}"
REACT_APP_PROVIDER_API="{AUTHN_API_URL}"

Add AuthProvider wrapper

Next, wrap your application in the authentication provider offered by Pangea. This wrapper tells your application whether you’re logged in or not, and handles redirecting to and from the Pangea-hosted pages.

Your code should look something like this:

import { AuthProvider, AppState } from "@pangeacyber/react-auth";

Example from sample app

To see the line of code above in context:

1. Go to the sample app.
2. Open the src folder.
3. Open the App.tsx file. You can see the AuthProvider is imported.

In your app

This is what’s happening when the user interacts with your app.

Check a user’s login status

You want your application to check if your user is authenticated (logged in) or (unauthenticated) logged out.

The code below shows how you might handle this logic:

import { MouseEvent } from "react";
import { Link } from "react-router-dom";
import { useAuth } from "@pangeacyber/react-auth";

const Header = () => {
  const { authenticated, login, logout } = useAuth();

  const handleLogout = (e: MouseEvent) => {
    e.preventDefault();
    logout(false);
  };

  return (
    <div className="header">
      <img src="/pangea-logo.svg" alt="Pangea Logo" />
      {authenticated && (
        <div className="nav">
          <Link to="/">Home</Link>
          <Link to="/profile">Profile</Link>
        </div>
      )}

      {authenticated ? (
        <button onClick={handleLogout}>Logout</button>
      ) : (
        <button onClick={login}>Login</button>
      )}
    </div>
  );
};

export default Header;

Example from sample app

To see the code sample above in context:

1. Go to the sample app.
2. Open the src folder.
3. Open the Header folder.
4. Open the index.tsx file. The file includes the entire code sample above.

User is authenticated

If a user is authenticated, then they will see details like the following:

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

const Profile = () => {
  const sessionData = getSessionData();

  return (
    <div className="profile">
      <h1>Profile</h1>
      <div>Identity: {sessionData.identity}</div>
      <div>First Name: {sessionData.profile?.first_name}</div>
      <div>Last Name: {sessionData.profile?.last_name}</div>
      <div>Email: {sessionData.email}</div>
    </div>
  );
};

The code sample above shows that an authenticated user will have access to profile information like:

• Identity
• First Name
• Last Name
• Email

Example from the sample app

To see the code sample above in context:

1. Go to the sample app.
2. Open the src folder.
3. Open the Profile folder.
4. Open the index.tsx file to view the code inside the sample app.

User is not authenticated

If someone tries to log into your application but is not authenticated, they will be sent back to the redirect URL (the one you originally configured in your env file).

If a user is unauthenticated, you might use the logic below:

useEffect(() => {
  if (!loading && !error && !authenticated) {
    navigate("/", { replace: true });
  }
}, [navigate, error, authenticated, loading]);

Example from the sample app

To see the code sample above in context:

1. Go to the sample app.
2. Open the src folder.
3. Open the AuthContext folder.
4. Open the index.tsx file to view the code inside the sample app.

Was this article helpful?

Contact us