✅ - Angular Amplify UI - perform custom logis on login

[versed sedge]

Yey, Y'all -

I'm using Amplify and the Amplify UI components in my angular application, and the implementation is quite simple:

import { Component } from '@angular/core';

@Component({
  selector: 'app-authenticator',
  template: `
    <amplify-authenticator
      [formFields]="formFields"
      [loginMechanisms]="['email']"
      initialState="signIn">
    </amplify-authenticator>
  `,
  styleUrls: ['./authenticator.component.scss'],
})
export class AuthenticatorComponent {
  formFields = {
    signUp: {
      email: {
        order: 1,
      },
      password: {
        order: 2,
      },
      confirm_password: {
        order: 3,
      },
      'custom:first_name': {
        order: 4,
        label: 'First Name',
        isRequired: true,
        placeholder: 'Nicole',
      },
      'custom:last_name': {
        order: 5,
        label: 'Last Name',
        isRequired: true,
        placeholder: 'Johnson',
      },
    },
  };
}

Now I need to perform custom logic when the user logs in specifically when using the UI. Note that if the user simply becomes authenticated by virtue of a stored session being restored, I don't want to perform that same logic.

What's the best way to implement a piece of custom code that's executed when the user logs in by interacting with the Authenticator hosted UI?

Thanks!

[severe pasture]

Hi @versed sedge , please take a look at the docs section about how to override function calls: https://ui.docs.amplify.aws/angular/connected-components/authenticator/customization#override-function-calls.
This should cover your usecase but let us know if you have further questions!

[versed sedge]

Hey @severe pasture , that link 403'ed

[severe pasture]

fixed!

[rich dagger]

✅ - Angular Amplify UI - perform custom logis on login