From Zero to Secured with Iridium and your Next.js App
Tags: security, nextjs, opensource, programming
Published: 2023-09-19 20:26:53

## 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. 


![Select create tenant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecgphymqyg515ujwwyam.png)

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.

![Create tenant popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/styazo6bfctdonrrb56p.png)

## 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.

![Select Login Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tkcwdaf01h41jns20e9.png)

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

![Add provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2h1pni4wbohm2ixjros.png)

## Registering Your Application


![create application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrs02wp2skcdg824zvkn.png)


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.


![All applications](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j9bv5oc20pewqfmz2uk.png)


## 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:

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

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

```sh
$ 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:

```sh
$ npm install && npm run dev
```

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

![Iridium Next.js Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/velu84l36rltzygbfj5l.png)

## 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.


![Authorization Callback Iridium Next.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6komi5dkvtd9izt2v03j.png)

## 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