Add Login

Allow users of your application to sign up and sign in using AuthN Hosted Login

In your application, you will need to provide a login link to the Pangea-hosted login page or send users to the login page with your application code.

Login URL

The URL for your application login link can be copied from the AuthN

Overview >> Configuration Details >> Hosted Login page in the Pangea User Console.

In the login URL query, you must add the following parameters:

• redirect_uri

  After users have authenticated to Pangea, the provided redirect URI will be used to send them back to your application. This URI must be pre-registered in your AuthN Redirect (Callback) Settings.

• state

  Your application should create an identifier for the current user authentication attempt, save it locally, and use it as the state parameter in the hosted login URL query.

  Pangea will return the state value in the redirect URI query when it sends the authenticated user back to your application. When handling the redirect, your app can correlate its original authentication request with the received redirect using the state value. This will prevent your application from processing authentication requests it didn't initiate. Using the state parameter as an identifier, you can also define request-specific data that might help handle the redirect in your application.

Example login link

<a href="pdn-rxvgsiq5lx5f.login.aws.us.pangea.cloud/?redirect_uri=http%3A%2F%2Flocalhost%3A5173%2Fredirect&state=j5U6PgvtZdNi">Sign up / Log in</a>

Example JavaScript to relocate user to the Hosted Login page

sign in (frontend)

JavaScript

// Set PANGEA_AUTHN_REDIRECT_URI and PANGEA_AUTHN_LOGIN_URL
// ...

const signIn = () => {
  generateState();

  const query = new URLSearchParams("");
  query.append("redirect_uri", PANGEA_AUTHN_REDIRECT_URI);
  query.append("state", localStorage.getItem("state"));

  const redirectUri = `${PANGEA_AUTHN_LOGIN_URL}?${String(query)}`;

  window.location.replace(redirectUri);
};

---

Was this article helpful?

Contact us