Skip to main content

Introduction

This library provides a set of Angular components to handle user authentication flows.

You can use them as building blocks to create your own authentication screens or use as a page.

Let's get started! 🎉​

note

If you are opting to use the components with no customization, follow the instructions in the Pages section.

First of all, we need to create a new module to import the components.

$ ng generate module auth

Concepts​

Building blocks​

They are the components that compose a pages. You can use them to create your own authentication flow. (e.g., you can use the BfmSigninFormComponent to create a custom sign-in screen).

Pages​

Pages are the composition of building block with default behavior expected for the user authentication flow. The customization is limited to the configuration options that we provide. (e.g., BfmSigninComponent is a composition of BfmSigninFormComponent and BfmSigninBackgroundComponent).

warning

This components will follow the default configuration. If you need any kind of customization, you should use them as building blocks in your application.

To use a page, you can directly import in your routes:

app-routing.module.ts
import { BfmSigninComponent } from '@celerofinancas/ui-auth';

const routes: Route[] = [
  {
    path: 'signin',
    component: BfmSigninComponent,
  }
];

All listed components are angular standalone components, for a better understanding of how to use or import them, please refer to the Angular documentation.