aws-amplify / aws-amplify/amplify-ui

FR (Angular Authenticator) Re-export primitives and provide a way to reuse them with custom slots

Open
#3,250 1 comment 0 reactions 0 assignees View on GitHub
Angular Authenticator feature-request Primitive
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### On which framework/platform would you like to see this feature implemented?

Angular

### Which UI component is this feature-request for?

Authenticator

### Please describe your feature-request in detail.

In our Angular 14 project we're using a custom slot to offer integration with a proprietary auth provider. Our code follows the example provided [here](https://github.com/aws-amplify/amplify-ui/blob/be2c495c9de9373080328996f09d485d0819a190/examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.html#L23-L31) to add a custom sign-in button.

We cannot get the data-xxx attributes to work as shown in the example, and I suspect this is because the `AmplifyAuthenticatorModule` does not re-export the `ButtonComponent` it uses. Maybe I misunderstand the example, I expected we would be able to use Amplify buttons in the same way as built-in Authenticator components already do:

```ts

Sign in with My Provider

```

Right now we have to hard-code the actual CSS classes that Amplify generates, which is not very future-proof.

### Please describe a solution you'd like.

Re-export ButtonComponent in the AmplifyAuthenticatorModule; this way the third party apps that use AWS Amplify can use `` declarations within their custom components. The module already exports `CheckboxComponent`, so in fact, maybe it should re-export all the built-in primitives that it imports.

### We love contributors! Is this something you'd be interested in working on?

- [ ] 👋 I may be able to implement this feature request.
- [ ] ⚠️ This feature might incur a breaking change.

Contributor guide

Open the contributing guide

Research direction

Start by locating AmplifyAuthenticatorModule and checking how it exports CheckboxComponent and imports ButtonComponent. Compare this with the custom-slot example in examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.html. Done means custom Angular slot templates can use the button primitive and the documented data attributes without hard-coded generated CSS classes.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.