AWS Cognito Authentication

Scale your application with confidence while ensuring robust security and user experience with our built-in AWS Cognito integration. This versatile solution leverages comprehensive security features to safeguard user data and applications, even as your user base grows.

By default, the template comes with the following built-in authentication methods:

• Email/Password - we added, by default, the traditional way of signing in.

We do not provide support for MFA or social logins (e.g. Google, Facebook, etc.) out of the box, because it requires an additional setup and it increases the complexity of the template.

You're free to add (or remove) any of the methods supported by AWS Cognito's Authentication.

Configuration

If you open the global configuration at src/config.ts, you'll find the auth object:

import { AuthStrategy } from '@/lib/auth/strategy';
 
export const config = {
  // ...
  auth: {
    strategy: AuthStrategy.COGNITO,
  },
  // ...
};

To use this method, you need to set the auth.strategy to AuthStrategy.COGNITO.

Getting Started

To get started with AWS Cognito Authentication, you'll need a AWS account. If you don't have one yet, you can sign up at https://aws.amazon.com/console.

Once you have a AWS account, follow these steps:

• Set Up Your User Pool: Create a new User Pool with Email as sign-in option and no MFA configuration.
• Set Up Your App Client: Create a new App Client for your User Pool.

How it Works

1. User Login: When a user attempts to log in, the provided credentials are sent to the server for validation through AWS Amplify Client library. Then the AWS Cognito checks the credentials against their user repository.
2. Creating a Session: Upon successful validation, AWS Cognito generates a session token, uniquely identifying the user's session. This token is securely stored in localStorage on the client's browser.
3. React Server Components: With the session token in place, React Server Components come into play. These components are used to fetch user-specific data directly on the server, utilizing the session token for authentication. This ensures that sensitive user information remains secure.
4. Rendering React Components: The data fetched by React Server Components is then passed to the relevant React components for rendering. This allows us to provide a personalized user experience without exposing sensitive information to the client-side JavaScript.

Explore More

AWS Cognito is a powerful tool that offers a wide range of features to secure your application. To learn more about AWS Cognito, you can refer to the official documentation.