From Zero to Secured with Iridium and your Next.js App

Introduction

We are excited to get Iridium’s newest release out, 0.2.2. While we are still in beta, we are rapidly enhancing our security and working to improve the experience of implementing security for developers everywhere.

Getting Started with Iridium

To initiate the process, head over to the Iridium management UI by visiting https://iridium.software. There, you can opt to log in through GitHub or Google, depending on your preference. After granting the necessary authorizations, you'll be redirected back to the Iridium UI.

Creating a Tenant

Begin by selecting the "Create Tenant" button. A modal will appear, prompting you to input a unique tenant name that adheres to URL-friendly conventions.

This tenant name will serve as the subdomain for your users' authentication. For instance, if you choose "my-tenant" as your tenant name, you will access your application through https://my-tenant.iridium.software.

When it comes to the environment selection, opt for "sandbox" for now.

Configuring the Login Box

To set up user authorization, you'll need to set up the login box. Click on the "Setup Login Box" option, which will allow you to configure login options for your users. In this example, we'll focus on enabling GitHub as the login provider.

By clicking the "Add Provider" box, a modal will appear. Choose "GitHub" as the provider and provide your GitHub OAuth application credentials.

Registering Your Application

Navigate to "Application Management" from the side menu. There, you can select "Create Application." Fill in the necessary details as prompted by the modal that appears and finally hit "submit".

• Application Name: This can be any name you choose, e.g. my-next-js-app
• Homepage URL: http://localhost:3000
• Description: this field is optional
• Authorization Callback URL: http://localhost:3000/callback

Make sure to save the generated client ID, as it will be required for future reference.

Integrating Iridium with Your Next.js Application

Now it's time to integrate Iridium into your Next.js application. Begin by cloning the Iridium Next.js starter application using the following commands:

$ git clone git@github.com:IridiumIdentity/iridium-nextjs-example.git
$ cd /iridium-nextjs-example

Create a .env.local file and open it for editing:

$ touch .env.local
$ vim .env.local

Ensure that your .env.local file resembles the following configuration, substituting properties as applicable.

NEXT_PUBLIC_IRIDIUM_DOMAIN=http://YOUR_TENANT_NAME_HERE.iridium.software:8381/
NEXT_PUBLIC_IRIDIUM_REDIRECT_URI=http://localhost:3000/callback
NEXT_PUBLIC_IRIDIUM_CLIENT_ID=YOUR_CLIENT_ID_HERE

Replace YOUR_TENANT_NAME_HERE with the tenant name you created earlier and YOUR_CLIENT_ID_HERE with the application ID Iridium generated for you.

Running Your Secured Application

Now it's time to run your application. Execute the following commands:

$ npm install && npm run dev

Access your application by navigating to localhost:3000 and selecting "Login" at the top right of the screen.

User Authorization Flow

Upon clicking "Login," you'll be seamlessly redirected to your personalized login domain. Choose "Login With GitHub" to initiate the process. This action will take you to GitHub, where you'll see application-specific details.

Select "Authorize ${your-github-name}" to grant authorization. You'll then be redirected back to your Next.js application, if successful, by a confirmation of successful authorization.

Conclusion

Congratulations on successfully implementing Iridium to secure your Next.js application!

Remember, this project is continually evolving, and your insights can contribute to its growth. Feel free to contact me directly at josh@iridium.software or my Co-Founder, Gianni at gianni@iridium.software with any questions.

Finally! Join our growing Iridium community on GitHub discussions or Discord.

-GitHub Discussions
https://github.com/orgs/IridiumIdentity/discussions
-Discord
https://discord.gg/2TMwHF2TrS