Skip to main content

Quick Start Guide to AuthN Capabilities

Learn how to add AuthN capabilities using hosted pages

This Quick Start Guide to AuthN capabilities is a resource provided by Pangea that outlines the key capabilities of Pangea's AuthN service. This guide is designed to help you quickly get started with Pangea's AuthN service.

Enable AuthN service​

To enable the AuthN service:

  1. Go to the Pangea Console and log in to the user console
  2. You can enable AuthN in your existing project or if you wish to create a new project, enter a project name (customized name), and click Done
  3. On the left-hand panel, click on the AuthN tab
  4. The Create a token window is displayed with the AuthN service being selected. Now, click Next
  5. The Getting Started window is displayed. Follow the hints to setup various settings of the AuthN service.

Run Next.js and Pangea AuthN Example​

To see how AuthN can be easily setup with a Next.js app follow the read me here and here is a quick Video for the same.

  1. Open a new terminal. Copy and run the npx create-next-app --example https://github.com/pangeacyber/pangea-integration-nextjs-authn command on your terminal
  2. Name your application (example my-app)
  3. Run cd my-app command to navigate to your new application folder
  4. Copy and run the cp .env.local.example .env.local command
  5. Open the .env.local file in your preferred editor (like VS code) to set the correct environment varaibles
  6. Copy and save the following configuration values from the Pangea AuthN dashboard:
    • Domain
    • Client Token
    • Hosted Login
    • Bearer Token
  7. Now run the application using npm run dev command and go to the URL where the application is hosted (example: http://localhost:3000 )
  8. Copy and paste the app URL (like http://localhost:3000). Go to Redirects, click + Redirect button, paste your app URL in the URL input, then click Save.
  9. On the Redirect entry you just created, select Set as default hosted redirect from the 3-dot menu.

You can also customize the branding to customize the various login flow pages.

On your Next.js app (my-app) Now, you will have a private profile page viewable by an authenticated user.

Was this article helpful?

Contact us