Utilize Ionic Auth Connect to establish the currentSession and currentAuthenticatedUser on AWS Amplify

Question

Utilize Ionic Auth Connect to establish the currentSession and currentAuthenticatedUser on AWS Amplify

Problem with Amplify Configuration

In the process of developing a new ionic app, our team decided to utilize AWS Amplify as our backend solution. To interact effectively with various services, we opted to use both "AMAZON_COGNITO_USER_POOLS" and "API_KEY" authentication types.

We incorporated Amplify API to connect with API Gateway for seamless data interaction.
Additionally, we integrated a GraphQL API with codegen for structured data management.

Our chosen method for authentication involved integrating Ionic Auth Connect with Cognito hosted UI. Despite following the documentation closely, we encountered issues with user recognition within Amplify.

Upon reviewing the resources available through Amplify and auth connect docs, we were unable to find a straightforward solution to manually set the current user session.

A few attempts were made to manually configure tokens using Amplify.configure and implementing an auth interceptor. However, these efforts proved unsuccessful due to validation logic embedded within the SDK that hindered our requests.

At this juncture, we are seeking advice on how to establish a user session in Amplify without having to resort to manual construction of API and GraphQL calls.

angular ionic-framework amazon-cognito aws-amplify ionic-enterprise-auth

Answer 1

Answer №1

If you have set up your authentication class as shown below: Check out the official documentation

import { Injectable, NgZone } from '@angular/core';
import { IonicAuth } from '@ionic-enterprise/auth';
import { Platform } from '@ionic/angular';
import { BehaviorSubject, Observable } from 'rxjs';
import { nativeIonicAuthOptions, webIonicAuthOptions } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService extends IonicAuth {
  private authenticationChange: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public authenticationChange$: Observable<boolean>;

  constructor(platform: Platform, private ngZone: NgZone) {
    super(platform.is('hybrid') ? nativeIonicAuthOptions : webIonicAuthOptions);
    this.authenticationChange$ = this.authenticationChange.asObservable();
    this.isAuthenticated().then((authenticated) => { this.onAuthChange(authenticated); });
  }

  public async onLoginSuccess(): Promise<void> {
    this.onAuthChange(true);
  }

  public async onLogout(): Promise<void> {
    this.onAuthChange(false);
  }

  private async onAuthChange(isAuthenticated: boolean): Promise<void> {
    this.ngZone.run(() => {
      this.authenticationChange.next(isAuthenticated);
    });
  }
}

You can utilize amazon-cognito-identity-js and manually configure CognitoUserSession like this:

Install amazon-cognito-identity-js

Create a method to handle setting the user session:

  private async setAmplifyUser(): Promise<void> {
    const idToken = await this.getIdToken();
    const accessToken = await this.getAccessToken();
    const authResponse = await this.getAuthResponse();
    const refreshToken = await this.getRefreshToken();

    const userPool = new CognitoUserPool({
      UserPoolId: `YOUR_USER_POOL_ID `,
      ClientId: `YOUR_APP_CLIENT_ID `,
    });

    // Continue with setting the user session...
  }

To ensure that Cognito session stays in sync with auth connect's session, make sure to call setAmplifyUser within onAuthChange

You can validate if your session is properly set by calling these methods:

Auth.currentAuthenticatedUser().then((res) => {
  console.log('currentAuthenticatedUser', res);
});

Auth.currentSession().then((res) => {
  console.log('currentSession', res);
});

Note when using multiple authentication modes: subscribe to onAuthChange in AppModule's constructor and switch aws_appsync_authenticationType based on the authentication state.

Answer 2

If you have set up your authentication class as shown below: Check out the official documentation

import { Injectable, NgZone } from '@angular/core';
import { IonicAuth } from '@ionic-enterprise/auth';
import { Platform } from '@ionic/angular';
import { BehaviorSubject, Observable } from 'rxjs';
import { nativeIonicAuthOptions, webIonicAuthOptions } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService extends IonicAuth {
  private authenticationChange: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public authenticationChange$: Observable<boolean>;

  constructor(platform: Platform, private ngZone: NgZone) {
    super(platform.is('hybrid') ? nativeIonicAuthOptions : webIonicAuthOptions);
    this.authenticationChange$ = this.authenticationChange.asObservable();
    this.isAuthenticated().then((authenticated) => { this.onAuthChange(authenticated); });
  }

  public async onLoginSuccess(): Promise<void> {
    this.onAuthChange(true);
  }

  public async onLogout(): Promise<void> {
    this.onAuthChange(false);
  }

  private async onAuthChange(isAuthenticated: boolean): Promise<void> {
    this.ngZone.run(() => {
      this.authenticationChange.next(isAuthenticated);
    });
  }
}

You can utilize amazon-cognito-identity-js and manually configure CognitoUserSession like this:

Install amazon-cognito-identity-js

Create a method to handle setting the user session:

  private async setAmplifyUser(): Promise<void> {
    const idToken = await this.getIdToken();
    const accessToken = await this.getAccessToken();
    const authResponse = await this.getAuthResponse();
    const refreshToken = await this.getRefreshToken();

    const userPool = new CognitoUserPool({
      UserPoolId: `YOUR_USER_POOL_ID `,
      ClientId: `YOUR_APP_CLIENT_ID `,
    });

    // Continue with setting the user session...
  }

To ensure that Cognito session stays in sync with auth connect's session, make sure to call setAmplifyUser within onAuthChange

You can validate if your session is properly set by calling these methods:

Auth.currentAuthenticatedUser().then((res) => {
  console.log('currentAuthenticatedUser', res);
});

Auth.currentSession().then((res) => {
  console.log('currentSession', res);
});

Note when using multiple authentication modes: subscribe to onAuthChange in AppModule's constructor and switch aws_appsync_authenticationType based on the authentication state.

Utilize Ionic Auth Connect to establish the currentSession and currentAuthenticatedUser on AWS Amplify

Answer №1

Similar questions

Leveraging parameters within a sequence of object properties

What are the steps to update data using Angular?

Incorporating an offset with the I18nPluralPipe

Fullcalendar in Angular fails to update events automatically

How can I utilize Angular services to transfer a count value to the Component?

`Angular Image Upload: A Comprehensive Guide`

Exploring Custom Validator Comparisons in Angular

What is the method for extracting user input from a text box on a webpage?

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

I am experiencing issues with the search feature in angular and node.js that is not functioning properly

Error: Attempting to access the property 'cinemaName' of an undefined object

Navigating through embedded arrays in Angular

Guide on utilizing Subscribe Observable for performing lookup in Angular

Phrases are truncated in the initial line of each ion-item within the ion-list

Recording changes in SVG size in Angular 2

Tips for verifying the presence of an active session after closing the browser

Navigating the bitbucket pipeline to execute test cases for Angular 4 applications

Retrieve the value of the specific element I have entered in the ngFor loop

Is there a way to run a node script from any location in the command line similar to how Angular's "

Error message in Angular when promises are not defined