Customize AWS Amplify cognito login/register component?

Question

In the tutorial - https://medium.com/@nickwang_58849/i-got-the-following-error-after-following-the-steps-82757cfaf9f0, it uses amplify-authenticator of npm package @aws-amplify/auth to login and register.

auth.component.html has just one line,

<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() {
  }
}

However, I will need to have a customized login (will need to add some required attributes when registering. And need to style the login/register controls). How to do it?

Is there any example of user write the login UI and just call the authentication (by amplify?) to log in cognito?

Answer 1

need to style the login/register controls. How to do it?

If you're using the latest Amplify modules (April 2020) you can customize the look and feel using CSS:

:root {
  --amplify-primary-color: #008000;
  --amplify-primary-tint: #0000FF; 
  --amplify-primary-shade: #008000;
}

and you can customize the text:

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

Docs: https://aws-amplify.github.io/docs/js/ui-components#customization

Tutorial from scratch: https://aws.amazon.com/blogs/mobile/amplify-framework-announces-new-rearchitected-ui-component-and-modular-javascript-libraries/

Migrating to the latest UI packages: https://aws-amplify.github.io/docs/js/ui-components#migration-guide