specialized registration process with auth0 in Angular

I am attempting to enhance the user information in a single call. The process involves first signing up with a username and password on Auth0, followed by adding additional userinfo to the database during the callback phase. However, I am encountering difficulties with this process as the API is triggered even if the user already exists in the Auth0 database.

Below is the code snippet from AuthService:

public signup(signupForm, callback) {
const self = AuthService._instance;
var result = "";


self._angularAuth0.signup({
  connection: "Users",
  responseType: "token",
  email: signupForm.email,
  password: signupForm.password
}, (error) => {
    console.log(error);        
}, this.onSignupSuccess(signupForm));    
}

private onSignupSuccess(form) {
const self = AuthService._instance;

const newUser = {
  firstName: form.firstName,
  lastName: form.lastName,
  email: form.email,
  birthdate: new Date(form.birthYear, form.birthMonth, form.birthDay),
  auth0_UserId: this.userProfile.user_id,
  gender: form.gender
};

self._dataService.add(this.baseUrl + "/users/", newUser);
}

In the app.ts file:

angularAuth0Provider.init({
    clientID: "3LGkdfVvFfdsdfMpz1UVcwjh1jktrf7j",
    domain: "somedomain.eu.auth0.com",
    callbackURL: "http://127.0.0.1:8080/authorized",
});

Answer №1

The this.onSignupSuccess call should be placed inside a callback function. Currently, it is being passed as the third parameter to the signup method, causing it to execute every time.

self._angularAuth0.signup({
    connection: "Users",
    responseType: "token",
    email: signupForm.email,
    password: signupForm.password,
    auto_login: false
}, (error) => {
    console.log(error);
    if(!error){
        this.onSignupSuccess(signupForm);
    }
});

Once this adjustment is made, you can manually log in the user. Refer to examples here.

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

Sending information from a parent component to a child component within an Angular application

How can I efficiently pass the this.formattedBookingPrice and this.formattedCheckingPrice values to a child component using the value array instead of static values, especially when they are inside the subscribe method? This is my parent component. expor ...

What is the role of @Output and EventEmitter in Ionic development?

I'm currently working on integrating Google Maps and Firebase database. My goal is to save my location in the Firebase database and transfer data using @Output and eventEmitter. However, I am facing an issue where pickedLocation has a value but this.l ...

The compilation of TypeScript extending DataType can sometimes result in errors

I have written a custom extension in my extensions/date.ts file which adds a method to the Date interface: interface Date { addDays: (days: number) => Date } Date.prototype.addDays = function(days: number): Date { if (!days) return this; let dat ...

Encountering a TypeScript error in Vue 3 when trying to assign a type of '($event: any) => void' to an event listener

Snippet of component code: <h2 @click="handleEvent(post.id)">{{ post.title }}</h2> function handleEvent(id: number) { router.push("/post/" + id); } Error message in TypeScript: Type '($event: any) => void' i ...

NextAuth is failing to create a session token for the Credential provider

Currently, I am in the process of developing an application using the t3 stack and am facing a challenge with implementing the credential provider from nextauth. Whenever I attempt to log a user in, I encounter an error in the console displaying the messag ...

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

My attempt to create a form in Angular 7 has resulted in an error message: ERROR TypeError: "_co.service.formData is undefined" Here is the HTML code for the component: <form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> <div clas ...

The type 'Observable<false>' cannot be assigned to the type 'Observable<boolean>'

Our team had been using Knockout.js (v3.5.0) along with its TypeScript definitions without any issues until TypeScript 4.6.2 came along. It seems that the problem goes beyond just the definitions file, possibly due to a change in how TypeScript handles boo ...

What is the process of using observables in Angular to retrieve a number or variable?

While working on an angular service that calls an API and processes a large amount of data, I encountered an issue. I was trying to count the occurrences of each type in the data and send back that count along with the data itself. However, I found that wh ...

A step-by-step guide on effectively adopting the strategy design pattern

Seeking guidance on the implementation of the strategy design pattern to ensure correctness. Consider a scenario where the class FormBuilder employs strategies from the following list in order to construct the form: SimpleFormStrategy ExtendedFormStrate ...

Designing architecture for NPM packages in TypeScript

I am currently developing multiple NPM packages using TypeScript and I am exploring the most effective strategies for supporting various target architectures. When compiling to ES3, there is extensive support but it comes with additional boilerplate for c ...

Tips for showcasing unique validation error messages

My form includes a text area for the user to input JSON Code. If the entered text is not valid JSON, an error message should be displayed but unfortunately, it's not working as expected. Below is my custom validator code: import { AbstractControl, V ...

Restrict the number of subscriptions allowed for an rxjs observable

Seeking a replacement for observable, subject, or event emitter that allows only one subscription at a time. The first subscriber should have priority to execute its subscribe function, with subsequent subscribers waiting their turn until the first unsubsc ...

While deploying: Error 500 - The installation of dependencies was unsuccessful due to a request timeout

I'm encountering an issue while attempting to deploy my bot to Azure. Here's the command I used: az bot publish --name --proj-name "" --resource-group --code-dir "/path/to/my-app" --verbose --version v4 Unfortunately, it is timing out durin ...

Strange Typescript Issue: Dependency Imports Not Recognized as Top-Level Module

Attempting to move a custom token from one account to another by following this detailed tutorial. Facing an issue with four errors showing up for all imports from the @solana/spl-token package. Tried removing the node-modules folder and reinstalling npm ...

What is the process for implementing an abstract factory pattern in Typescript?

I’m currently facing a challenge while attempting to incorporate a standard abstract factory pattern in Typescript, only to find that the compiler is not quite on board with my efforts. Below is a simplified version of the code I am working with: abstra ...

Validating Input Field with Regular Expression in JavaScript/TypeScript to Avoid Starting with Zero

I need to create a RegEx for a text field in Angular / TypeScript that limits the user to inputting only a 1-3 digit number that does not start with 0. While it's straightforward to restrict input to just digits, I'm struggling to prevent an inpu ...

Issue with Angular ngFor binding. What could be causing this error to occur?

I have a main component called DOCUMENT. This document receives a URL segment and retrieves an array of associated objects from my database. Then, using @Output() documents = new EventEmitter() and an @Input() in a DOCUMENT VIEW component, I loop through t ...

Encountering a Static Injector error in Angular 5 while trying to inject a component from a shared module

Here lies the code for my component file. My goal is to develop a reusable modal component using ng-bootstrap's modal feature. However, upon trying to import the following component from the shared module, I encounter a static injector error. Despite ...

Exploring Angular2 Heroes Guide - Declaring Hero Properties with Nested Objects

Currently, I am diving into the Angular2 Tour of Heroes guide and striving to grasp the concept of services. So far, I've successfully implemented the basic tutorial, but as I attempt to add more complexity, my application crashes without clear reason ...

The TypeScript error code TS2339 is indicating that the 'modal' property is not recognized on the type 'JQuery'

I'm currently utilizing Typescript with AngularJS and have encountered an issue with modals when using the typed definition of jQuery library. The specific error message I am receiving is: 'error TS2339: Property 'modal' does not exist ...