Encountered problem in Angular with Cognito: Unable to access property 'user' of null in authorization.service.ts at line 29

For the purpose of understanding, I am working on implementing a proof of concept involving AWS Cognito and API Gateway. I have customized the UserPoolId and ClientId in the authorization.service.ts file based on the instructions in a video tutorial. The application is up and running successfully on localhost:4200, but I am facing difficulties registering an account on my userpool within the AWS console.

Here are the video reference and source code links:

To refer to the relevant component in the source code, check out the register.component.ts file:

  • register.component.ts
// Angular component for user registration
import { Component } from '@angular/core';
import {NgForm} from "@angular/forms";
import {AuthorizationService} from "../shared/authorization.service";
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent { 
  // Component properties
}

  • authorization.service.ts
// Service for user authorization using AWS Cognito
import { Injectable } from '@angular/core';
import {AuthenticationDetails, CognitoUser, CognitoUserPool} from 'amazon-cognito-identity-js';
import { Observable } from 'rxjs/Observable';

// User pool configuration
const poolData = {
  UserPoolId: 'ap-southeast-1_4E5c8sOtF',
  ClientId: '307efnv599eldkq3odcld2j3dh'
};

const userPool = new CognitoUserPool(poolData);

@Injectable()
export class AuthorizationService {
  // Service methods for user registration, authentication, and more
}

View the console error log related to the registration issue

Answer №1

Even though an error occurs, the program continues to run, causing the subsequent line of code to execute. To correct this, simply include a return statement here.

if (err) {
   console.log("signUp error", err);
   observer.error(err);
   return;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger an event when an Angular template's *ngIf condition is met

Let's say I am using the Angular directive *ngIf to display a user object like so: <div *ngIf="user$ | async as user" class="container"> <p>{{user.name}}</p> </div> Is there a method where I can trigger some code once this ...

What is the best way to integrate Emotion styled components with TypeScript in a React project?

Currently, I am delving into TypeScript and attempting to convert a small project that utilizes Emotion to TypeScript. I have hit a roadblock at this juncture. The code snippet below export const Title = styled.div(props => ({ fontSize: "20px", ...

Transfer a file to Laravel using $request->input()

Is there a way to upload my file to FTP when I'm sending the data from Angular using JSON format instead of using $request->file("Fichier1") in Laravel? Here is an example of how the data is sent from Angular to Laravel: https://i.stack. ...

The property 'matCellDefTrackBy' cannot be bound to 'mat-cell' as it is not recognized as a valid property

Wondering how to implement trackBy in Angular Material? I encountered the error message below: Can't bind to 'matCellDefTrackBy' since it isn't a known property of 'mat-cell' html: <mat-table [dataSource]="data" ...

Serverless Framework Express Rest-API encounters a 502 Bad Gateway Error

Currently, I am working on building an express rest-api using the serverless framework with the code provided below. The issue I am facing is that while the POST request method to the path /fruits is functioning properly, the GET request method is resultin ...

Accessing data from an API and showcasing information on a chart using Angular

I'm currently developing a dashboard application that requires me to showcase statistics and data extracted from my MongoDB in various types of charts and maps using Angular and Spring Boot. The issue I'm facing is that when attempting to consume ...

Instantiate a TypeScript object and establish its type by setting restrictions derived from an input object

I have been working on creating a function that takes an object A: { [key: string]: string | undefined } as its parameter. The goal is to generate a new object B with all properties from A, converting each string property to type number, and each string | ...

Establish a table containing rows derived from an object

I am currently dealing with a challenge in creating a table that contains an array of nested objects. The array I have follows this schema: array = [ { id: 'Column1', rows: { row1: 'A', row2 ...

Using TypeScript for Routing in Angular

I encountered an error message that says the module 'route' is not available. I'm not sure why this is happening, any thoughts? "Uncaught Error: [$injector:nomod] Module 'route' is not available! You either misspelled the module n ...

Verify and retrieve information from the Dynamics CRM Web API with the help of Angular 2 (TypeScript)

How can one authenticate and query the Dynamics CRM Web API from a Single Page Application developed with Angular 2 (TypeScript)? Initial research indicates that: The Dynamics CRM (version 2016 or 365) instance needs to be registered as an application ...

Invoke the HTTP API from the device application

I need to make an API call to a server that does not have the HTTPS protocol. I came across this post on Stack Overflow: https://stackoverflow.com/questions/57433362/api-calls-made-in-ionic-4-app-not-working-on-android-device The post mentions that HTTP ...

The module named "tapable" does not contain an export for the item "Tapable"

While developing a WordPress plugin for a custom Gutenberg block, I encountered a challenge. I needed to incorporate additional scripts in TypeScript and opted to use "$ tsc --watch" along with a "tsconfig.json" file for compilation. Upon installing @word ...

Can you explain the concept of being "well-typed" in TypeScript?

The website linked below discusses the compatibility of TypeScript 2.9 with well-defined JSON. What exactly does "well-typed" JSON mean? As far as I understand, JSON supports 6 valid data types: string, number, object, array, boolean, and null. Therefore, ...

Component in Angular 5 is experiencing compatibility issues with Angular Material

I have integrated angular material into my Angular 5 application successfully in the app.module.ts file. However, when I try to use it in my page.component.html file, I encounter an error that says: 'Uncaught Error: Template parse errors: 'mat-t ...

Having trouble displaying nested routes in Angular within the view

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

Tips for explaining the structure of a basic Just functor in TypeScript

I am embarking on my first attempt to create a simple interface in TypeScript, and I find myself questioning every step along the way. The core question that troubles me is: How can I best describe this straightforward Jest matcher extension? /** * @par ...

Potential breakpoint (Breakpoint established but not yet linked)

My experience with debugging my Angular app in Chrome was going smoothly through the Chrome Debugger extension with automatic settings. However, something changed after a Windows 7 reboot and all my breakpoints became inactive. I suspect this was due to a ...

determining the properties of a given data type

I am currently working with a type that I have obtained from a third party source. My goal is to determine the type of a specific property within that type, using TypeScript. For example: type GivenType = { prop: string; } type desiredType = <&l ...

An error occurred in Angular 4 where an expression was changed after it had been checked, causing a

Encountering an error and struggling to debug from the console: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Main Bike Trails'. at viewDebugE ...

Employing the filter or find technique to extract an element contained within a JSON data structure

Is it possible to retrieve one of these items using the filter or find method to search for a match within the fiberAgrupations array? I attempted the following: const landlineRate = this.monolineJsonRates[0].cambioCaudal.getAll() .filter(landlinedRat ...