Forem: Ashish Padhy

Auth0 and Amplication: Simplifying Authentication in Your Applications

Ashish Padhy — Fri, 24 Nov 2023 10:19:36 +0000

Introduction

Auth0 is a cloud service that provides a turn-key solution for authentication, authorization and user management. It is a feature-rich service that is highly customizable and can be used in a variety of ways. Auth0 is a great choice for a wide range of applications, from simple web apps to enterprise applications. It provides a great way to add authentication and authorization to your application without having to build it yourself, and has various integrations with services such as Google, Facebook, Twitter, and more. This along with its passwordless authentication and multi-factor authentication makes it a great choice for a wide range of applications.

How to use Auth0 authentication in your Amplication application

Setting up Auth0 authentication in your Amplication application is easy. You can use the Auth0 plugin to add the required dependencies and configuration files to your application. The steps are as follows:

Create a service in amplication

Start by creating a service within the Amplication platform. Once your service is set up, click on the Commit changes & build button to initiate the build process. Merge the generated Pull Request to move ahead.

Add the NestJS Auth Module

Next, add the NestJS Auth Module to your service. You can do this by navigating to the Plugins section within your service topbar menu.

Also create and set an authentication entity if you have not done so yet. For more information on how to do this, see the Authentication section of the Amplication documentation.

Add the Auth0 plugin

Next, add the Auth0 plugin to your service. You can do this by navigating to the 'Plugins' section within your service sidebar menu, where you'll see a list of available plugins and installed plugins(see screenshot below for reference).

Note: You have to remove other auth plugins already there in the service by inspecting the installed plugins tab. ( Look out for the default JWT Auth Provider added automatically 😉 )

After installing the plugin you have to provide settings for the plugin. You can do this by clicking the settings button next to the plugin name.
After this you can follow the instructions in the Plugin to configure your Auth0 account

To provide a summary of the steps:

Create an Auth0 account
Create an Auth0 application and API
Configure the Auth0 application
Configure the Auth0 plugin

The settings will look something like the following picture:

Then click the Save button to save the settings and commit the changes.

Some things to note:

The domain, clientId, issuerURL, and audience are required fields. These are the values you get from your Auth0 account.

The emailFieldName provided must be present in the authentication entity.

defaultUser will be used to create a default and new users.

Alternative: Automate setup of Auth0 account

If you hate having to setup everything manually, or just don't have access to the auth0 account, then you don't have to worry as I have got you covered. Introducing Auth0 Management API. Using this all the nifty work will be done for you. All you have to do is provide is a access token with necessary permisssions. You can also customise the names 🤖🚀.

For how to get the access token and the permissions required, see the Plugin Docs

After getting these you can add them to the plugin settings as shown below:

Then click the Save button to save the settings and commit the changes. This will trigger a build and the plugin will do the rest for you.

Some things to note:

If there are already actions and api with that name, the plugin will not create them again.

As you can see on this PR from our example repo, the plugin has created the actions and api for us. 🎉🎉🎉

How things work

Manual method :-

The plugin will create the following files for you as seen in this PR.

Adds the required dependencies to the package.json file.

The @auth0/auth0-spa-js and jwks-rsa help in adding the authentication and authorization to the frontend and backend respectively. While react-router-dom is used to add the routes to the frontend.

Adds the required .env variables to the .env file used in the frontend and backend.

Adds ra-auth0-provider to the Admin. This is used to setup Auth0 in the frontend. It provides the authProvider prop to the Admin component, and has requisite login, logout functions.

import { Auth0Client } from "@auth0/auth0-spa-js";
import { AuthProvider, UserIdentity } from "react-admin";

export const PreviousLocationStorageKey = "@react-admin/nextPathname";

export const client = new Auth0Client({
  domain: process.env.REACT_APP_AUTH0_DOMAIN || "",
  clientId: process.env.REACT_APP_AUTH0_CLIENT_ID || "",
  cacheLocation: "localstorage",
  authorizationParams: {
    audience: process.env.REACT_APP_AUTH0_AUDIENCE,
    scope: "openid profile email",
  },
  useRefreshTokens: true,
});

export const auth0AuthProvider: AuthProvider = {
  login: async () => {
    await client.loginWithPopup({
      authorizationParams: {
        redirect_uri: process.env.REACT_APP_AUTH0_REDIRECT_URI,
      },
    });

    return Promise.resolve();
  },

  logout: async () => {
    await client.logout({
      logoutParams: {
        returnTo: process.env.REACT_APP_AUTH0_LOGOUT_REDIRECT_URI,
      },
    });

    return Promise.resolve();
  },

  async checkAuth() {
    const isAuthenticated = await client.isAuthenticated();
    if (isAuthenticated) {
      return Promise.resolve();
    }

    localStorage.setItem(PreviousLocationStorageKey, window.location.href);

    return Promise.reject();
  },

  checkError: async ({ status }) => {
    if (status === 401 || status === 403) {
      throw new Error("Unauthorized");
    }
  },

  getPermissions: async () => {
    if (!(await client.isAuthenticated())) {
      return;
    }

    await client.getIdTokenClaims();
    Promise.resolve();
  },

  getIdentity: async () => {
    if (!(await client.isAuthenticated())) {
      throw new Error("User not authenticated");
    }

    const user = await client.getUser();

    if (!user) {
      throw new Error("User not found");
    }

    return {
      id: user.sub,
      fullName: user.name,
      avatar: user.picture,
      email: user.email,
    } as UserIdentity;
  },

  handleCallback: async () => {
    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {
      try {
        await client.handleRedirectCallback();
        return;
      } catch (error) {
        throw new Error("Failed to handle login callback: " + error);
      }
    }
    throw new Error("Failed to handle login callback.");
  },
};

Adds the logic to get access token in graphql provider as seen in these lines
Adds custom login page to the admin app. This is done by changing the default Login.tsx file.
Adds the JWT Base Strategy to the backend. This checks the JWT token sent in the request header and verifies it using the JWKS key provided by Auth0. This is done by adding the following code to the src/auth/jwt/base/jwt.strategy.base.ts file. And then validating it in the database using validateBase function.

import { ConfigService } from "@nestjs/config";
import { PassportStrategy } from "@nestjs/passport";
import { passportJwtSecret } from "jwks-rsa";
import { ExtractJwt, Strategy } from "passport-jwt";
import { Auth0User } from "./User";
import { UserInfo } from "../../UserInfo";
import { UserService } from "src/user/user.service";

export class JwtStrategyBase extends PassportStrategy(Strategy) {
  constructor(
    protected readonly configService: ConfigService,
    protected readonly userService: UserService
  ) {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), // Extract JWT from the Authorization header
      audience: configService.get("AUTH0_AUDIENCE"), // The resource server where the JWT is processed
      issuer: `${configService.get("AUTH0_ISSUER_URL")}`, // The issuing Auth0 server
      algorithms: ["RS256"], // Asymmetric signing algorithm

      secretOrKeyProvider: passportJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: `${configService.get(
          "AUTH0_ISSUER_URL"
        )}.well-known/jwks.json`,
      }),
    });
  }

  // Validate the received JWT and construct the user object out of the decoded token.
  async validateBase(payload: { user: Auth0User }): Promise<UserInfo | null> {
    const user = await this.userService.findOne({
      where: {
        email: payload.user.email,
      },
    });

    return user ? { ...user, roles: user?.roles as string[] } : null;
  }
}

Adds the JWT stratgey code which is editable by users to the backend. This is done by adding the following code to the src/auth/jwt/jwt.strategy.ts file. And then validating it in the database using validate function.

import { Injectable } from "@nestjs/common";
import { JwtStrategyBase } from "./base/jwt.strategy.base";
import { ConfigService } from "@nestjs/config";
import { Auth0User } from "./base/User";
import { IAuthStrategy } from "../IAuthStrategy";
import { UserInfo } from "../UserInfo";
import { UserService } from "src/user/user.service";

@Injectable()
export class JwtStrategy extends JwtStrategyBase implements IAuthStrategy {
  constructor(
    protected readonly configService: ConfigService,
    protected readonly userService: UserService
  ) {
    super(configService, userService);
  }

  async validate(payload: { user: Auth0User }): Promise<UserInfo> {
    const validatedUser = await this.validateBase(payload);
    // If the entity is valid, return it
    if (validatedUser) {
      return validatedUser;
    }

    // Otherwise, make a new entity and return it
    const userFields = payload.user;
    const defaultData = {
      email: userFields.email,
      name: userFields.name,
      username: userFields.name,
      roles: ["admin"],
    };

    const newUser = await this.userService.create({
      data: defaultData,
    });

    return { ...newUser, roles: newUser?.roles as string[] };
  }
}

In this code, if a user is not found in the database then a new user is created with the default roles as admin. This can be changed by the user as per their requirements and needs.

Note :- Please make sure that the field names in the defaultData object are present in the authentication entity.
Also make sure of the role you wish to assign to the user. In this case it is admin.

Adds the User type to the src/auth/jwt/base/User.ts file. This is used to get the user data from the JWT token.

export interface Auth0User {
  nickname: string;
  username: string;
  name: string;
  email: string;
  email_verified: boolean;
  picture: string;
}

The types of the fields in this interface can be changed as per the requirements of the user and generally varies from application to application. You can find more information about the fields here. However, the email field is required as it is used to identify the user. Also, if you want some fields you may have to change the scope in the src/auth-provider/ra-auth-auth0.ts in the frontend.

Customization - Add social connections

With Auth0 you can add social connections to your application. This allows users to login to your application using their social media accounts. This allows you to provide a more personalized, secure and passwordless experience for your users. You can add social connections to your application by following the steps below:

Go to the Auth0 Social Connections page. You will see various options out there as can be seen below.
Here I am choosing GitHub however, you can choose any of the options available. The steps are nearly similar to each other.
After choosing the option, you will be redirected to the configuration page for that option. Here you can configure the connection as per your requirements. You can also add custom scopes to the connection. For more information on how to do this, see the Marketplace documentation.

Note:- Make sure to add the email scope to the connection as shown in the image. This is required to get the email of the user.

Click the Create button to create the connection. This will redirect you to the Connection setup page where you can configure on which apps you should add this.
Now, the connections should be visible in the login page of your application. You can see the login page of the example application below.

Future Work

Make the plugin more customizable by adding more options to the plugin settings. This will allow the user to customize the plugin as per their requirements. Some of the options that can be added are:

Authentication using phone number
Passwordless authentication
Two factor authentication
Adding custom roles

If you have any other suggestions, please feel free create an issue at the Auth0 plugin repo

Outro

Amplication's Auth0 Plugin provides a powerful but effortless way to add authentication to your application. It is easy to use and can be configured in a few minutes thus reducing complexity overhead.

I hope this blog post was helpful to you. If you have any questions or suggestions, please feel free to reach out to me on Twitter, GitHub or LinkedIn. I would love to hear from you.

⚖️ Scaling Your Project

Ashish Padhy — Sun, 16 Apr 2023 09:24:44 +0000

From Side Hustle to Global Phenomenon

Getting Started

Starting a web app as a side hustle is a great way to turn your passion into a profitable venture. But to take your project from a small idea to a global phenomenon, you need to be able to scale it. You need to design it with scalability in mind, optimize your code for performance, and plan for growth.

In this session, you will learn how to make your web app a success by implementing proven strategies for scalability. You will learn how to use cloud hosting and load balancing to handle increasing traffic, optimize your database for performance, and use caching and content delivery networks to improve speed and user experience. You will also learn how to measure and analyze your app's performance, so you can identify and resolve bottlenecks and improve scalability.

Whether you're just starting or have an established web app that needs to scale, this session will provide the guidance and tools you need to turn your side hustle into a global phenomenon.

So, are you ready to make your web app a success? Let's get started! 🚀

What is Scalability?

Long Story Short 🔍 : “Scalability” of software is its ability to sustainably manage change in scale of demand.

So what is meant by “demand” for software?

“Demand” is the request for the performance of the core system functionality.

Scalability refers to the ability of a system or process to handle an increasing amount of work or demand while maintaining or even improving its performance. In other words, it refers to the ability of a system to grow and adapt to changing circumstances without encountering significant obstacles or limitations.

Scalability can apply to various aspects of a system, such as its capacity to handle more users, data, transactions, or requests, expand geographically, integrate with other systems, or address changes in the workload.

For example, a scalable website can handle a large number of concurrent users without slowing down or crashing. A scalable business can expand its operations, customer base, or product offerings without experiencing significant disruptions or inefficiencies. A scalable software system can accommodate new features, technologies, or integrations without compromising its stability or performance.

But Why Scalability:-

Everyone must have used websites such as tools such as ChatGPT and have experienced server crashes first-hand. But do you know the real reason behind it?

In today's world, users expect a lightning-fast load time, high availability 24/7, and minimal disruptions to the user experience, no matter how many others are trying to access your web app. Suppose your application isn't designed correctly, and cannot handle the increase in users and workload. In that case, people will inevitably abandon your app for more scalable apps offering a better user experience.

Also, high traffic crashes a website due to a mismatch between traffic levels and the capacity of the website's infrastructure. Site visitors create system requests—clicking buttons, adding products to carts, searching for products, inputting passwords—that exceed the processing
the capacity of your servers and any third-party systems involved in the visitor journey.

Your website will slow down, freeze, or crash when this happens.

How High Online Traffic Can Crash Your Website

Simply put: Websites crash because insufficient resources lead to system overload.

It has a lot to do with websites needing to be more scalable.

The system requests—like the jumping up and down—bring the site crashing down.

💡 But still, why scalability instead of planning before and buying resources?

While it is certainly possible to plan and purchase resources in advance, this can be costly and inefficient, especially for smaller organizations needing more resources to predict their future needs accurately.

By designing for scalability from the outset, organizations can more easily adapt to changing circumstances and ensure that their systems remain responsive and reliable as they grow. This often involves designing systems with distributed architectures that can scale horizontally rather than vertically, allowing additional resources to be added incrementally as needed.

Also, by scaling down, they can avoid paying for unused resources and ensure they only pay for what they need.

How to make things scalable, then?

Before we do a deep dive into how to make websites scalable, we will briefly examine what happens when you call a website.

Your web browser sends a request to the website's server.
The server receives the request and processes it.
The server retrieves necessary data or files to display the website.
The server sends the data or files back to your browser.

The speed of this process depends on various factors like server hardware, internet connection, website code and design, and traffic on the website at the time.

Our Objectives when we talk about scalability

To ensure a website can handle increasing users and traffic without becoming slow or unresponsive.
To ensure that the website can adapt to changes in user behaviour, technology, and market conditions over time.
To optimize the use of resources, including hardware, software, and network infrastructure, to maximize efficiency and cost-effectiveness. By reducing costs in downtime.

Steps:-

How to Build Scalable Web Applications? - DevTeam.Space

What are scalable web applications and how they work

1. Assess the need for scalability

Only try to improve scalability if needed, as it is costly.
Make sure that your expectations of scaling justify the expenses
Collect data to verify your web application supports your growth strategy.

2. Use Metrics to define the challenge

There are four scalability metrics that you need to measure to determine your web app's scalability challenge:-

- Memory Utilization (RAM)
- CPU Utilization (Most Preferred)
- Disk I/O
- Network I/O

3. Choose the correct tools required for monitoring your app

To know when to scale up and down, you need something to monitor your app in real-time and provide you with metrics to make decisions. Some popular frameworks are:

Google Cloud delivers tools like Stackdriver Monitoring, which can monitor your app's performance and provide you with real-time
Similarly, AWS offers services like **Amazon
Heroku
Prometheus, Nagios, and Grafana are some popular third-party choices.

4. Pick the correct software architecture pattern:-

One of the most critical factors in scalability, architecture enables web applications to adapt according to the user demand and offer the best performance.

Monolithic Architecture:

A Monolithic application is built in one large system and usually one codebase. Monolithic architecture is an excellent choice for small apps, as it offers the advantage of having one single codebase with multiple features. But it can quickly become chaotic and out of control when the application evolves with additional parts and functionalities.

Microservices:

Unlike Monolithic architecture, Microservices are built as a suite of small services, each with its codebase. So all the services have their logic and database and perform specific functions. There are no strict dependencies in modules in the microservices framework, making it quite flexible. By now, any upgrades in specific functionalities have become a more manageable task without affecting the entire

5. Ensuring scalable and sustainable code

Plan for scalability from the beginning. Consider how the codebase will handle increased traffic and data, and design the code accordingly.
your code in modules that are independent and can be easily reused. This makes it easier to update and maintain the code over time.
sure your code is optimized for speed and efficiency, which will improve its scalability.

6. Deployment

Multiple PaaS and IaaS out there providing services for scalable deployments, like Google Cloud, AWS, Heroku etc.

There are two types of scaling, especially in Cloud Computing:-

Vertical Scaling (Scaling Up)

Vertical scaling refers to adding more power to your current machines so that it meets demand. Suppose now your server requires more processing power. Then, your solution may be adding processing power and memory to the physical machine running the server.

Horizontal Scaling (Scaling Out)

Horizontal scaling refers to adding additional nodes or machines to your infrastructure to handle new demands. Suppose you are hosting a web application on a server and realize that it no longer has the capacity (or capabilities) to direct traffic or load. Then, adding a server may be your solution.

Another to take care of during deployments is Load Balancer

This monitors the traffic usage to a web application and, through a set of servers, will portion out the users to spread the load across multiple servers. This prevents a problem where one server would have to handle a surge of users.

A load balancer basically acts as the "traffic cop" sitting in front of your servers and routing client requests across all servers, capable of fulfilling those requests in a manner that maximizes speed and capacity utilization and ensures that no one server is overworked, which could degrade performance.

7. Load testing and security

Realistic load and security testing are important to simulate the environment correctly, users and data your web application might encounter. If realistic simulations aren't dealt with during development and testing, then you will miss out on the development opportunities to address any issues before they hit the public.

Some other tools to help scale your web app

1. Caching:-

Scalability also refers to user experience, and caching is one of the most important tools.

Caching is an essential technique for improving website scalability and performance. It involves storing frequently accessed data or content in a temporary location to quickly retrieve it without recalculating or fetching from the source each time requested. Caching can reduce the load on servers and databases and improve the response time for users. Some popular caching strategies include browser caching, server-side caching, and content delivery networks (CDNs).

Examples of CDNs:- Cloudflare, StackPath, Edgio

2. Containerization:-

Containerization is the packaging together of software code with all its necessary components like libraries, frameworks, and other dependencies so that they are isolated in their own "container."

This is so that the software or application within the container can be moved and run consistently in any environment and on any infrastructure, independent of that environment or infrastructure’s operating system. The container acts as a kind of bubble or a computing environment surrounding the application, keeping it independent of its surroundings. It’s basically a fully functional and portable computing environment.

To run a container, you need a runtime engine which shares your OS with the image.

Examples:-Docker, Linux, Kubernetes, AWS App2Container

3. Server-less architecture:-

One of the most popular serverless architectures is Function as a Service (FaaS), where developers write their application code as a set of discrete functions. Each function will perform a specific task when triggered by an event, such as an incoming email or an HTTP request. After the customary stages of testing, developers then deploy their functions, along with their triggers, to a cloud provider account.

When a function is invoked, the cloud provider either executes the function on a running server or, if there is no server currently running, it spins up a new server to execute the function. This execution process is abstracted away from the view of developers, who focus on writing and deploying the application code.

Examples:- AWS Lambda, Google Cloud functions

4. Database Optimization:-

Sharding: Sharding is a technique used in database optimization to horizontally partition large databases into smaller, more manageable pieces called shards. This helps to distribute the load across multiple servers, improving scalability and reducing the risk of a single point of failure.
Indexing: Indexing is the process of creating a data structure that improves the speed of data retrieval operations on a database table. By creating an index on one or more columns of a table, the database can quickly locate the required rows without having to scan the entire table.
Query Optimization: Query optimization involves optimizing the performance of SQL queries that are executed on a database. This can involve rewriting queries to make them more efficient, analyzing execution plans to identify bottlenecks, and tuning the database configuration to improve query performance.

Thank You 👏🏻

How to contact me :-
Twitter:- https://twitter.com/Shurtu_Gal
LinkedIn:- https://linkedin.com/in/ashish-padhy3023/