@frontegg/ng-auth

Authentication Plugin

Angular pre-built Component for faster and simpler integration with Frontegg services.

Installation

Frontegg-Ng-Auth is available as an npm package.

// using npm  
npm install @frontegg/ng-auth  
  
// using yarn  
yarn add @frontegg/ng-auth  
  
// NOTE: to get the latest stable use @latest.  

Usage

All you need is to add AuthModule to the AppModule:

/* app.module.ts file */

import { AppComponent } from "./app.component";
import { CoreModule } from "@frontegg/ng-core";
import { AuthModule } from '@frontegg/ng-auth';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CoreModule.forRoot({
      context: {
        baseUrl: `${window.location.protocol}/${host}`,
        requestCredentials: "include",
      },
    }),
    AuthModule.forRoot()
    // ...rest modules
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Auth Components

• Sso Component
• Team Management Component
• Mfa Component
• Profile Component

Options and Customizations

Frontegg-Ng-Auth provide the ability to fully customize your components to align it with your App UI design.

• header <Component>
• backgroundImage <string>
• backgroundColor <CSSColor>
• loaderComponent <Component>
• routes <string[]>

Advanced Customizations

• Login Component

header <Component>

(optional) The Ng Component is used to customize your authentication page header

{
  imports: [
   AuthPlugin.forRoot({
    header: MyAuthPageHeader,
    // ...rest options
   })
  ]
}

backgroundImage <string>

(optional) The CSS Color is used to for authentication page background color

{
  imports: [
   AuthPlugin.forRoot({
    backgroundImage: 'https://image_url' | 'data:image/png;base64,...',  
    // ...rest options
   })
  ]
}

backgroundColor <CSSColor>

(optional) The CSS Color is used to for authentication page background color

{
  imports: [
   AuthPlugin.forRoot({
    backgroundColor: '#FAFAFA' | 'red' | 'rgb(200,200,200)',
    // ...rest options
   })
  ]
}

loaderComponent <Component>

(optional) The Ng Component displayed on first load while resolving the verifying the authenticated user, refreshing the token, and to check if the user should be redirected to the login page.

{
  imports: [
   AuthPlugin.forRoot({
    loaderComponent: <MyLoaderComponent>,  
    // ...rest options
   })
  ]
}

routes <string[]>

(optional) The path routes for the Authentication Components, these pathes are used to redirect an user to a specific route depends on the authentication state.

{
  imports: [
    AuthPlugin.forRoot({
      routes: {
        /**
         * redirect to the page when a user is authenticated 
         */
        authenticatedUrl: '/',
        /**
         * redirect to the page when a user is not authenticated 
         */      
        loginUrl: '/account/login',
        /**
         * when navigating to this url, AuthProvider will logout and remove cookies 
         */
        logoutUrl: '/account/logout',
        /**
         * redirect to the page when a user wants to activate their account 
         */
        activateUrl: '/account/activate',
        /**
         * redirect to the page when a user forgot his account password 
         */
        forgetPasswordUrl: '/account/forgot/password',
        /**
         * redirect to the page when a user is redirected from the forgot password url 
         */
        resetPasswordUrl: '/account/reset/password',
      },  
      //...rest options
    })
  ];
}

Contributing

The main purpose of this repository is to continue developing Frontegg Angular to making it faster and easier to use. Read our contributing guide to learn about our development process.

Notice that contributions go far beyond pull requests and commits.

License

This project is licensed under the terms of the MIT license.