@frontegg/ng-auth NPM

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

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](src/lib/sso)
- [Team Management Component](src/lib/team)
- [Mfa Component](src/lib/mfa)
- [Profile Component](src/lib/profile)

## Options and Customizations
**Frontegg-Ng-Auth** provide the ability to fully customize your components 
to align it with your App UI design.

- [`header`](#header-ngcomponent) `<Component>`
- [`backgroundImage`](#backgroundimage-string) `<string>`
- [`backgroundColor`](#backgroundcolor-csscolor) `<CSSColor>`
- [`loaderComponent`](#loadercomponent-ngcomponent) `<Component>`
- [`routes`](#routes-string) `<string[]>`

**Advanced Customizations**

- [`Login Component`](src/login/README.md)

### `header <Component>`

*(optional)* The Ng Component is used to customize your authentication page header
```ts
{
  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.