7-minute login quick start for developers

Integrate Next Identity into a simple local HTML app in under ten minutes. Clone a pre-built project, configure your details, and run it locally with HTTPS.

In order for this single page app (SPA) SDK to work, you will need:

1. A Next Identity account (console.nextidentity.com to register) with an application and a SPA client type.

2. You will also need to make sure you set up your post login redirect URI and your URI allowlist to include the localhost URIs.

Callback URI: https://localhost:3000/callback
Redirect URI: https://localhost:3000/callback

Clone the sample Next Identity Single Page Application (SPA) project:

Shell

git clone https://github.com/next-reason/ni-login-spa.git
cd ni-login-spa

Update the configuration file (config.js) in the project to match your OpenID Connect provider details:

JavaScript

// config.js
const config = {
    clientId: 'your-client-id', // Replace with your client ID
    issuer: 'https://your-identity-provider.com', // Replace with your issuer URL 
tokenIssuer: 'https://your-identity-provider.com', // Replace with your issuer URL 
    redirectUri: window.location.origin + '/callback', // Important: Add a callback route
    scopes: ['openid', 'profile', 'email'], // Add the scopes you need
};

The project uses a default OpenID Connect SDK that has basic login, token exchange, and edit profile functions:

HTML

<script src="/next-identity-client.js"></script>

If you need to customize the SDK, clone the repository and use your local version:

Shell

git clone https://github.com/next-reason/ni-login-spa.git

Follow the README instructions in that repository to build and link it into your project.

Next Identity requires HTTPS as a callback URL. To use HTTPS on localhost, install mkcert:

Shell

brew install mkcert
brew install nss # For Firefox support

Shell

choco install mkcert

Follow installation steps at mkcert GitHub.

Run the following inside the project directory:

Shell

mkcert -install
mkcert localhost

This creates localhost.pem and localhost-key.pem.

If you are using a more advanced dev server like Webpack Dev Server, you'll need to configure it to use the certificates. Here is an example webpack.config.js configuration:

JavaScript

module.exports = \{\
    // ... other config\
    devServer: \{
    https: \{
      key: './localhost-key.pem',
      cert: './localhost.pem',
    },
    port: 3000,
  },
};

Shell

npx serve -s . -l 3000 --ssl-cert localhost.pem --ssl-key localhost-key.pem

Now your app will be accessible via https://localhost:3000/.

Your Next Identity login should now be fully functional and running securely over HTTPS!