Skip to main content

Angular Prebuilt Component

Purpose

In the Cryptr Angular SDK we chose to implement a Component to ease integration into your views.

Here is it's behavior:

  • When no session is active the component show a signin (by default) or a signup button (choose which one you want)
  • When an active session is present it turns into a dropdown button with a logout button an end-user account section (user's identity and access to account security view) a fully customizable section for your needs.
App Module Configuration

You have to add AccountAccessButtonComponent to your application module providers array to use our prebuilt solution

HTML integration

All inputs are passed as below syntax

<cryptr-account-access-button 
[auth]="auth"
[input-key-name]="param-name-in-your-component"
></cryptr-account-access-button>`

Component inputs

To help you customize this widget we added bunch of input parameter that can help you integrate it in an existing app. Here is the list of them

Cryptr Inputs

keytypedefaultrequiredpurpose
authAuthService-truehelping managing state and session
localestring-falseDefine a specific locale value if you do not want to use your default_locale value from your configuration
redirectUristring1-falseDefine a specific redirect uri value if you do not want to use your default_redirect_uri value from your configuration
unauthenticatedPathstring/falsePath used when you trigger logout button in the widget pane to redirect to

1 ⚠️ Root path if SPA without SSR : As said here we encourage you to set this param to your root path if you do not use SSR implementation

Global customization inputs

keytypedefaultrequiredpurpose
isWidgetbooleantruefalseIf false the rendering will be similar a simple button
defaultSignTypestringsigninfalseWhen no current existing session, this will display a signin or signup button. Values are signin and signup
defaultSignTextstringSign infalseText shown in above button

Label inputs

keytypedefaultrequiredpurpose
accountLabelstringManage my accountfalseThe label text of widget pane user account access button
buttonLabelstringreplace your config domain slug to string2falseThe label text of toggle button
logOutLabelstringLog outfalseThe label text of widget pane log out button

Other customization inputs

keytypedefaultrequiredpurpose
accountBtnStyleany Style properties-falseStyle object such as {backgroundColor: '#c0c0c0'} to design the user account access button
badgeStyleany Style properties-falseStyle object such as {backgroundColor: '#c0c0c0'} to design the user initials badge
childStyleany Style properties-falseStyle object such as {marginTop: ''} to design your custom child
logoSrcstring path/URL-falseThe source logo image you want in the widget toggle button
logOutBtnStyleany Style properties-falseStyle object such as {backgroundColor: '#c0c0c0'} to design the log out button
popupHeightnumber935falseHeight of user account popup
popupWidthnumber915falseWidth of user account popup

  1. If domain is my-company-name the result value will be my company name