Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,80 @@ keywords: igniteui for angular | angular schematics | templates | infragistics
---

import { Image } from 'astro:assets';
import cliIgxSideAuth from '../../../images/general/cli-igx-side-auth.png';
import igxSideAuthLoginBar from '../../../images/general/igx-side-auth-login-bar.png';
import igxSideAuthLoginDialogs from '../../../images/general/igx-side-auth-login-dialogs.png';
import igxSideAuthSteps from '../../../images/general/igx-side-auth-steps.png';
import igxSideAuthQuestion from '../../../images/general/igx-side-auth-question.png';
import igxSideAuthLoginButton from '../../../images/general/igx-side-auth-login-button.png';
import igxSideAuthProfileAvatar from '../../../images/general/igx-side-auth-profile-avatar.png';
import igxSideAuthLoginDialog from '../../../images/general/igx-side-auth-login-dialog.png';
import igxSideAuthRegisterDialog from '../../../images/general/igx-side-auth-register-dialog.png';
import igxSideAuthLoginGoogle from '../../../images/general/igx-side-auth-login-google.png';
import igxSideAuthLoginSocial from '../../../images/general/igx-side-auth-login-social.png';
import igxSideAuthLoginSocials from '../../../images/general/igx-side-auth-login-socials.png';


# Authentication Project Template

There are multiple versions of a project (called project templates) to choose from when using either the [`new` command with Ignite UI CLI](/general/cli/getting-started-with-cli#create-a-new-project), [with Ignite UI for Angular Schematics](/general/cli/getting-started-with-angular-schematics#create-a-new-project) or the [Step by step mode using Ignite UI CLI](/general/cli/step-by-step-guide-using-cli) or [Ignite UI for Angular Schematics](/general/cli/step-by-step-guide-using-angular-schematics).

When creating Ignite UI for Angular project with Angular Schematics or Ignite UI CLI you can select a template with an basic implementation of a client-side authentication module that require as little additional setup as possible to jump-start apps with user management.
When creating an Ignite UI for Angular project with Angular Schematics or Ignite UI CLI, authentication is available as an add-on option when you select a supported navigation template. It provides a basic implementation of a client-side authentication module that requires as little additional setup as possible to jump-start apps with user management.

## Create Authentication Project

You can select an authentication project either when going through the Step by step experience after selection 'Ignite UI for Angular' project type:
### Interactive wizard

Authentication is offered as an extra step in the interactive wizard after selecting a navigation template. The flow is:

1. Choose a project template: **Empty Project**, **Side Navigation**, or **Side Navigation Mini**.
2. If **Side Navigation** or **Side Navigation Mini** is selected, the wizard prompts: _"Would you like to add authentication to this project?"_
3. If **Empty Project** is selected, the authentication prompt is not shown.

<Image src={igxSideAuthSteps} alt="Step by step experience" class="responsive-img" />

Answering yes generates one of two authenticated variants:

<Image src={cliIgxSideAuth} alt="Step by step experience" class="responsive-img" />
- **Side Navigation + Authentication** - a side navigation shell extended with the authentication module
- **Side Navigation Mini + Authentication** - a compact side navigation shell extended with the authentication module

Or through the new command:
<Image src={igxSideAuthQuestion} alt="Auth question" class="responsive-img" />

For a full walkthrough of the wizard steps, see [Step-by-Step Guide Using Ignite UI CLI](step-by-step-guide-using-cli) or [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics).

### Direct command (advanced)

The authentication template IDs can also be passed directly to `ig new` or `ng new` for non-interactive project creation. These IDs are not shown in the interactive wizard because authentication is presented as a follow-up option there.

**Side Navigation + Authentication - Ignite UI CLI:**

```bash
ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth
```

If you are using the Schematics collection run:
**Side Navigation + Authentication - Angular Schematics:**

```bash
ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-auth
```

**Side Navigation Mini + Authentication - Ignite UI CLI:**

```bash
ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-mini-auth
```

**Side Navigation Mini + Authentication - Angular Schematics:**

```bash
ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-mini-auth
```

## Description

This template builds upon the Side Navigation default and adds a profile page and a login section to the app's nav bar that will display a login button or an avatar of the logged in user:
Both the Side Navigation + Authentication and Side Navigation Mini + Authentication variants build upon their respective navigation base and add a profile page and a login section to the app's nav bar that will display a login button or an avatar of the logged in user:

<Image src={igxSideAuthLoginBar} alt="Login bar" class="responsive-img" />
<Image src={igxSideAuthLoginButton} alt="Login bar" class="responsive-img" />
<Image src={igxSideAuthProfileAvatar} alt="Profile bar" class="responsive-img" />

The login bar also integrates dialogs to sign in or up:

<Image src={igxSideAuthLoginDialogs} alt="Login dialogs" class="responsive-img" />
<Image src={igxSideAuthLoginDialog} alt="Login dialog" class="responsive-img" />
<Image src={igxSideAuthRegisterDialog} alt="Register dialog" class="responsive-img" />

The project also supports various [external authentication providers](#add-a-third-party-social-provider).

Expand All @@ -67,10 +101,9 @@ The project is setup for a single page app with REST API services, so the `Authe
- `/register` - register with user details
- `/extlogin` - passes along user info from external source

All endpoints are expected to return an JSON Wen Token(JWT)
or an error state with message.
All endpoints are expected to return a JSON Web Token (JWT) or an error state with message.

> **Note:** For demonstration purposes the project has a `services/fake-backend.service.ts` that intercepts requests . The `BackendProvider` in `authentication.module.ts` should **not** be used in production. Both the provider and the file should be removed when development starts.
> **Note:** For demonstration purposes the project has a `services/fake-backend.service.ts` that intercepts requests. The `BackendProvider` in `authentication.module.ts` should **not** be used in production. Both the provider and the file should be removed when development starts.

As with any authentication model, using JWT-s requires security considerations. Particularly, the tokens received from the REST API are stored on the client. For seamless app reloads during development, the user data is stored in the browser local storage, which is potentially vulnerable to XSS attacks.

Expand All @@ -81,7 +114,12 @@ As usual, always evaluate security aspects and adjust accordingly, the project s

## Add a third-party (social) provider

Your project's main module `src/app/app.module.ts` should be generated with the external authentication service injected and commented out initialization similar to:
The external authentication service is initialized in your project's app entry point. The exact location depends on the bootstrapping type selected during project creation:

- **Standalone projects** (default) — initialization is in `src/app/app.config.ts` via a provider function.
- **NgModule projects** (`igx-ts-legacy`) — initialization is in `src/app/app.module.ts` via the `AppModule` constructor.

In both cases the pattern is the same: the social provider calls are commented out and ready to be enabled. For example, in an NgModule project:

```ts
// in app.module.ts
Expand All @@ -94,7 +132,7 @@ export class AppModule {
}
```

To enable user login with a specific third-party provider all that is required is to un-comment the specific line and replace the `` with your app's client ID.
To enable user login with a specific third-party provider all that is required is to un-comment the specific line and replace the `<CLIENT_ID>` with your app's client ID.
If you need to obtain one, for example for Google Account sign in, follow the provider-specific guide at:

- [Obtain credentials](https://developers.google.com/identity/protocols/OpenIDConnect#getcredentials)
Expand Down Expand Up @@ -131,7 +169,7 @@ https://developers.facebook.com/docs/apps/#register

As you enable providers, all buttons will become active:

<Image src={igxSideAuthLoginSocial} alt="Social login options" class="responsive-img" />
<Image src={igxSideAuthLoginSocials} alt="Social login options" class="responsive-img" />

### Provider details

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,20 @@ By default, the project uses standalone components. To use NgModule-based bootst
ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy
```

The project is created in a directory named after the project. The following project templates are available:
The project is created in a directory named after the project. The following base project templates are available:

| Template ID | Description |
| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------ |
| empty | Project structure with routing and a home page |
| side-nav | Project structure with a side navigation drawer |
| side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
| empty | Project structure with routing and a home page. Authentication is not available for this template. |
| side-nav | Project structure with a side navigation drawer. Supports authentication as an add-on (see below). |
| side-nav-mini | Project structure with a compact side navigation drawer. Supports authentication as an add-on (see below). |

When using the interactive wizard, selecting `side-nav` or `side-nav-mini` triggers an additional prompt asking whether to add authentication. The following template IDs are generated and can also be used directly with `ng new` for non-interactive creation - they are not shown in the wizard's template list:

| Template ID | Description |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |

The following arguments are available when creating a project:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,20 @@ ig new my-app --framework=angular --type=igx-ts --assistants none --agents none
As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project with standalone components by default. To use NgModule-based bootstrapping instead, set `--type=igx-ts-legacy`.
</DocsAside>

The new application is created in a directory named after the project. The following project templates are available for Angular:
The new application is created in a directory named after the project. The following base project templates are available for Angular:

| Template ID | Description |
| :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| empty | Project structure with routing and a home page |
| side-nav | Project structure with a side navigation drawer |
| side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
| empty | Project structure with routing and a home page. Authentication is not available for this template. |
| side-nav | Project structure with a side navigation drawer. Supports authentication as an add-on (see below). |
| side-nav-mini | Project structure with a compact side navigation drawer. Supports authentication as an add-on (see below). |

When using the interactive wizard, selecting `side-nav` or `side-nav-mini` triggers an additional prompt asking whether to add authentication. The following template IDs are generated and can also be used directly with `ig new` for non-interactive creation - they are not shown in the wizard's template list:

| Template ID | Description |
| :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |
| side-nav-auth | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |
| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details. |

The following arguments are available when creating a project:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ import play from '../../../images/general/play.svg';
import buildCLIappGif from '../../../images/general/buildCLIapp.gif';
import igStepByStepProjectType from '../../../images/general/ig-step-by-step-project-type.png';
import igStepByStepNewProjectName from '../../../images/general/ig-step-by-step-new-project-name.png';
import igStepByStepNewProjectTemplate from '../../../images/general/ig-step-by-step-new-project-template.png';
import igStepByStepNewProjectTheme from '../../../images/general/ig-step-by-step-new-project-theme.png';
import igStepByStepNewProjectTemplate from '../../../images/general/igx-side-auth-steps.png';
import igStepByStepNewProjectQuestion from '../../../images/general/igx-side-auth-question.png';
import igStepByStepNewProjectTheme from '../../../images/general/igx-side-auth-theme.png';
import igStepByStepNewProjectAction from '../../../images/general/ig-step-by-step-new-project-action.png';
import igStepByStepTemplateGroup from '../../../images/general/ig-step-by-step-template-group.png';
import igStepByStepComponentFeatures from '../../../images/general/ig-step-by-step-component-features.png';
Expand Down Expand Up @@ -41,7 +42,7 @@ ng new --collection="@igniteui/angular-schematics"

## Create a New Project

The wizard guides you through four configuration steps before scaffolding the project.
The wizard guides you through the following configuration steps before scaffolding the project. When **Side Navigation** or **Side Navigation Mini** is selected as the template, an additional authentication step appears.

### Step 1: Choose a bootstrapping type

Expand All @@ -59,14 +60,18 @@ Enter a name for the new application. The project is created in a directory with

### Step 3: Choose a project template

Navigate the available project templates using the arrow keys and press ENTER to confirm. Three templates are available:
Navigate the available project templates using the arrow keys and press ENTER to confirm. Three base templates are available:

- **empty** - a project structure with routing and a home page, no pre-built navigation
- **side-nav** - a project structure with a pre-built side navigation drawer
- **auth** - a side navigation project extended with a basic authentication module (see [Authentication Project Template](auth-template) for details)
- **side-nav-mini** - a project structure with a pre-built compact side navigation drawer

<Image src={igStepByStepNewProjectTemplate} alt="Step by step prompt: choose project template" class="responsive-img" />

If you select **side-nav** or **side-nav-mini**, the wizard will prompt you with an additional step asking whether to add an [authentication module](auth-template) to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **empty**, the authentication prompt is skipped.

<Image src={igStepByStepNewProjectQuestion} alt="Step by step prompt: auth question" class="responsive-img" />

### Step 4: Choose a theme

Two theme options are available:
Expand All @@ -76,7 +81,7 @@ Two theme options are available:

<Image src={igStepByStepNewProjectTheme} alt="Step by step prompt: choose default or custom theme" class="responsive-img" />

After completing these four steps, the wizard generates the project structure, then prompts you to [configure AI coding assistants](#ai-assistant-integration). Once AI configuration is complete, a Git repository is initialized and the initial state is committed. The wizard then asks whether to finish or continue by adding a component view.
After completing the above steps, the wizard generates the project structure, then prompts you to [configure AI coding assistants](#ai-assistant-integration). Once AI configuration is complete, a Git repository is initialized and the initial state is committed. The wizard then asks whether to finish or continue by adding a component view.

<Image src={igStepByStepNewProjectAction} alt="Step by step prompt: finish or add a view" class="responsive-img" />

Expand Down
Loading
Loading