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

Before you can start using AuthN, you need to enable it. When you enable the AuthN service, you will also create a default token that you can use with AuthN APIs.

If you haven't enabled AuthN when you created your Pangea project, do so by following these steps:

1. Click AuthN on the left-hand navigation sidebar in the Pangea User Console . A dialog with details about the service will appear. Click Next.
2. In the Create a token dialog you can accept defaults and click Next. You also have the following options:
   • (Recommended) Save the AuthN token in Vault, which will give an option to retrieve the token using Vault APIs. If Vault is not enabled, click Enable Vault, and a modal displays describing Vault features. Click Done to close the modal and return to the AuthN modal.
   • Provide a token name to make it easier to recognize in your Pangea project token list.
   • Specify an expiration date.
   • Grant access to other services with the AuthN token, if you plan to use these services and AuthN at the same time.
   • Create a new token or extend an existing one for use with AuthN.
3. In the Getting started dialog, accept the defaults or make your selection of authentication methods to use in your Log in / Sign up Flow. Click Done.
4. In the next dialog, you can create a user by sending an example request to the AuthN APIs. Click Send to try it out.
5. Click Finish to complete the wizard. This should take you to the AuthN Overview page.

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>Username: {sessionData.username}</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
• Username
• 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