Title: Using AWS Amplify UI in Angular Without Full Vendor Lock-in Author: A full-stack developer @ fortunate.blog

If you’re adding authentication to an Angular app with AWS Cognito, you’ve got two options: build it all yourself or use a library. The second sounds easier, but with Angular, it’s not that simple.

AWS offers @aws-amplify/ui-angular, a prebuilt UI library that covers login, signup, and password reset. It works, but the catch is it expects your frontend to be part of an AWS Amplify project. That’s not always what you want. Fortunately, you can skip the full Amplify CLI setup and still get the UI working.

The Setup

Install the necessary packages:

npm install aws-amplify @aws-amplify/ui-angular

Then in main.ts, configure Amplify with your Cognito pool info:

const resource: ResourcesConfig = {
Auth: {
  Cognito: {
    userPoolClientId: 'your-client-id',
    userPoolId: 'your-user-pool-id',
  }
}
}
Amplify.configure(resource);

This is enough for the UI to work. No need to run amplify init or tie your repo to the AWS Amplify Console.

Auth Flow

In your Angular service, fetch the token like this:

public async getAmplifyToken(): Promise<any> {
const cognitoTokens = (await fetchAuthSession()).tokens;
if (!cognitoTokens || !cognitoTokens.idToken) return undefined;
return cognitoTokens.idToken.toString();
}

Use this in an AuthGuard to protect routes:

canActivate(): Promise<boolean> {
return this.authService.getAmplifyToken()
.then(token => token !== undefined, _ => false)
.catch(_ => false);
}

Routing

Use Angular routing with the guard:

const routes: Routes = [
              { path: '', component:
                            YourComponent, pathMatch: 'full', canActivate: [ AuthGuard ] },
{ path: 'signin', redirectTo: 'auth' },
{ path: 'signout', redirectTo: 'auth' },
{ path: 'auth', component: AuthComponent },
];

And drop the authenticator into your AuthComponent:

<amplify-authenticator></amplify-authenticator>

Styling with Material

If you’re using Angular Material and want consistent colors:

@import '@aws-amplify/ui/dist/styles.css';

:root, [data-amplify-theme] {
--amplify-colors-primary-10: var(--mat-sys-primary);
--amplify-colors-primary-20: var(--mat-sys-primary);
--amplify-colors-primary-40: var(--mat-sys-primary);
--amplify-colors-primary-60: var(--mat-sys-primary);
--amplify-colors-primary-80: var(--mat-sys-primary);
--amplify-colors-primary-90: var(--mat-sys-primary);
--amplify-colors-primary-100: var(--mat-sys-primary);
}

Final Thoughts

This setup lets you get Amplify’s Auth UI in Angular without adopting the full Amplify framework. It’s stable enough—until AWS breaks something again. The last major shift was between Angular 13 and 19, when @aws-amplify/ui-angular jumped to version 5.

But if you’re okay with an occasional upgrade cycle, this gives you working auth with minimal boilerplate and no Amplify Console in the mix.