Streamlined Security for Angular Applications: A Guide to Implementing Iridium

Introduction

In the ever-evolving web development landscape, security remains a paramount concern for any forward-thinking startup. In this quickstart guide, we’ll delve into securing your Angular application using our Beta release of Iridium. We have a limited set of users we are allowing to test it out, so hurry over. Our open-source, auth solution promises a robust and user-friendly authentication process and real-time insights into customer activity. Oh, did I mention we are killing off passwords forever? We absolutely are.

Getting Started

To initiate the process, head over to the Iridium management UI by visiting https://conduct.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, ready to embark on your journey of securing your Angular application.

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. It must be URL safe. Think of letters, numbers, and hyphens. For instance, if you choose my-tenantas your tenant name, you will access your application through the following link.

https://my-tenant.iridium.software

** Keep in mind, your tenant name must be unique within the Iridium system. So, please choose something other than my-tenant. Make sure you remember the name of your tenant, you’ll need it later.

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

Create a GitHub Application

In this example, we’ll focus on enabling GitHub as the login provider. Don’t have a GitHub application to use? You can create one by filling out the form here. For the form values enter the following:

• Application Name: Any name you wish. In this example we can use MyIridiumInstance
• Homepage URL: Set this to http://localhost:4300
• Authorization callback URL: Set this to http://localhost:4300/callback

Finally, hit the Register application button.

After the application is created you’ll need to save the Client ID and generate a new Client Secret to use the application within Iridium.

Configuring the Login Box

In order to facilitate user authentication, 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.

By clicking the “Add Provider” box, a modal will appear.

Choose “GitHub” as the provider and provide the GitHub application credentials you created in the previous step.

Registering Your Application

Next, we need to register your application for use within your tenant. Select “Application Management” from the side menu.

Select “Create Application”

Add the following values to the modal that pops up.

After the application is created, make sure to save the client ID for future reference.

Integrating Iridium with Your Angular Application

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

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

Open the `environment.ts` file for editing:

$ vim src/app/environments/environment.ts

Ensure that your environment.ts file resembles the following configuration.

export const environment = {
  production: false,
  iridium: {
    domain: 'https://YOUR_TENANT_NAME_HERE.iridium.software/',
    redirectUri: 'http://localhost:4300/callback',
    clientId: 'YOUR_CLIENT_ID_HERE',
    errorPath: '/error'
  }
};

Replace YOUR_TENANT_ID_HEREwith the tenant name you established earlier and YOUR_CLIENT_ID_HEREwith the Iridium application ID, you saved.

Running Your Secured Application

Execute the following commands from the root folder of the Angular project you cloned.

npm install && ng serve

Navigate to localhost:4300, select login in the top menu bar.

Upon clicking “Login,” you’ll be 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.

Basic Iridium Login with Github

Select “Authorize ${your-github-name}” to grant authorization.

You’ll then be redirected back to your Angular application, with confirmation of successful authorization.

Successfully authorized application with Iridium

Conclusion

Congratulations on successfully implementing Iridium to secure your Angular application! Remember, this project is continually evolving, and your insights can contribute to its growth. Join the Iridium community on

• GitHub discussions https://github.com/orgs/IridiumIdentity/discussions or
• Discord https://discord.gg/2TMwHF2TrS

to share your thoughts, queries, and ideas for the future. Together, we’re shaping a more secure digital landscape for the world through open source! As always, you can contact me directly at josh@iridium.software or check us out here: https://www.iridium.software/.