Sign In

This component is used to handle the user sign-in flow.

Developer notes

Before you start, make sure that you have read the notes below:

OAuth flow

Configuration required

The sign-in component automatically triggers an OAuth flow when the user clicks on the sign-in button. The OAuth flow is handled by the ui-oauth library. To better understand how to configure, please refer to the Oauth Documentation.

If clientID are not provided, the OAuth flow will not work.

Angular version

info

This documentation follows angular 17 standards. To import the components in below angular, please refer to Angular documentation.

Assets

tip

Every assets URL in BFM Interfaces should follows the cdsSource pattern. To better understand how to use it, please refer to the Assets documentation.

Web Components

tip

To use a web component, make sure that you have imported the javascript file in your HTML file. For more information, follow the Web components guide.

Also, have followed the Web Component Configuration guide.

BfmSignInComponent

Let's get started by BfmSignInComponent component.

Composition

The BfmSignInComponent is composed of the following components:

• BfmSingInFormComponent - The form to handle the user sign-in flow.
• BfmSingInBackgroundComponent - The background image of the sign-in screen.

Usage

First of all, you need to import the selected page in your component:

Angular

refer to Angular version note

auth.component.ts

import { BfmSignInFormComponent } from '@celerofinancas/ui-auth';

@Component({
  standalone: true,
  selector: 'auth-signin',
  imports: [ BfmSignInFormComponent ],
  templateUrl: './auth.component.html',
})
export class SignInComponent {}

Then, you can use the bfm-signin component in your template:

<bfm-signin></bfm-signin>

Web Component

refer to Web Components note

If you want to use the BfmSignInFormComponent as a web component, you can import in your HTML file as follows:

your-html-file.html

<bfm-signin button-text="custom text"></bfm-signin>

Inputs

The BfmSignInComponent has the following inputs:

logo

The URL of the logo to be displayed in the sign-in screen.

• Accepts a string in cdsSource pattern.

Type	Default
string	assets/shared/logo.svg

refer to Assets notes

buttonText

The text to be displayed in the sign-in button.

Type	Default
string	Fazer login

interfaceType

The user interface that is being created.

Type	Default
string	client

Events

signin

This page automatically triggers a oauth flow when user click on sign-in button. And emits user data when sign-in is successful.

This behavior is provided by BfmSingInFormComponent.

Type
EventEmitter

Example

Building a custom sign-in screen, changing the logo and the button text:

HTML

auth-signin.component.html

<bfm-signin
  [logo]="'assets/shared/my-custom-logo.svg'"
  [buttonText]="'Fazer login por IB-NAME'"
  (signin)="onSignin($event)"
></bfm-signin>

TS

auth-signin.component.ts

import { Component } from '@angular/core';
import { BfmSignInComponent } from '@celerofinancas/ui-auth';

@Component({
  selector: 'auth-signin',
  templateUrl: './auth-signin.component.html',
  styleUrls: ['./auth-signin.component.scss'],
  imports: [ BfmSignInComponent ],
})
export class AuthSigninComponent {
  // Handle the sign-in event
  public onSignin(event: User): void {
    console.log('User data:', event);
  }
}