Customize AWS Amplify cognito login/register component?

Question

 I used the "amplify-authenticator" of the npm package "@aws-amplify/auth" to login and register.

So, auth.component.html :

<amplify-authenticator></amplify-authenticator>

auth.component.ts:

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

@Component({

  selector: 'app-auth',

  templateUrl: './auth.component.html',

  styleUrls: ['./auth.component.css']

})

export class AuthComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

So how can I customize login, to style the login control? 

Answer 1

You can customize it like below:

:root {

  --amplify-primary-color: #008000;

  --amplify-primary-tint: #0000FF; 

  --amplify-primary-shade: #008000;

}

Also, customize the text:

<AmplifySignIn headerText="My Custom Sign In Header" slot="sign-in" />

<AmplifySignUp headerText="My Customer Sign Up Header" slot="sign-up" />

Do you want to master AWS, then do check out the AWS Certified Solutions Architect Professional training by Intellipaat.