DevExtreme Angular Application Template – New Authentication UI (v20.2)

DevExtreme Team Blog
09 February 2021
The DevExtreme Angular Application Template (v20.2) ships with new user authentication forms and a client-side API so you can easily integrate these new forms with your backend.

Angular Authentication Forms

As you can see below, we added new Sign In, Sign Up, Reset and Change Password forms to our Angular Application Template. The forms were designed in such a way as to comply with today’s most common web-based password authentication patterns/workflows. Of course, you can easily customize these pre-built authentication forms to better address organizational needs/requirements.

Backend Integration

In addition to the authentication forms, we included a simple client-side API designed to handle authentication form submit events. Once a user submits a form, form data is automatically collected and passed to a corresponding submit handler. You can make minor changes to our built-in handlers to send corresponding HTTP requests to your authentication backend API – regardless of backend technology used. For your convenience, we placed all these handlers in a single file. Please refer to our documentation for more information.

Access Authenticated User Data

Our Angular Application Template now includes an Authentication Service. This service gives you access to authenticated user data from any part of your application. In addition, this service allows you to send different authentication-related commands to your backend (such as ‘log in’, ‘log out’, etc). The code below helps demonstrate this capability:

export class MyComponent implements OnInit { 
  currentUser = {}; 
  userMenuItems = [ 
  ..., 
  { 
    text: 'Logout', 
    onClick: () => { 
      this.authService.logOut(); 
    } 
  }]; 
  
  constructor(private authService: AuthService, ...) { } 
  
  ngOnInit() { 
    this.authService.getUser().then((user) => this.currentUser = user); 
  } 
}
You can find a complete AuthService usage example here.

Try It

To explore these capabilities first-hand, you can review or download our demo app and associated source code:
As always, your feedback and suggestions are welcome.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
Mo cisse
Mo cisse

Great feature.

Can you do the same for blazor wasm ?

Thanks


9 February 2021
Engº Bruno Marques
Bruno Marques
Great starting point. 🙂
9 February 2021
Rick Mathers
Rick Mathers
+1 on Blazor WASM, especially with your own auth provider. I keep watching the examples page, but it hasn't changed in a while
9 February 2021
Customer100256
Do Nhu Vy
I am waiting DevExpress API/UI for Authentication/Authorization for Blazor WebAssembly.
9 February 2021
Zein Sweis
Zein Sweis
How can you allow Single Sign on with this?
9 February 2021
CRM-d4912f15-de1a-4da6-8cba-55637e0e77c3
Abdul
nice I'm looking forward this is also for XAF Blazor 
9 February 2021
Emanuele
Emanuele

Hi,

Great!

+1 for making a template authentication also for jQuery and for ASP.NET Core :)

11 February 2021
Alfred Rakgole 2
Alfred Rakgole 2

This kind of templates  features goes a long way to saving time,
they are as important as new features on controls.

+1 for making a ASP.NET Core template authentication

13 February 2021
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Hi,


Thank you for your interest in our DevExtreme and Blazor components. We plan to enhance our Blazor project templates and include authentication UI in future versions. Note that Blazor UI differs from DevExpreme. If you want to use DevExpreme widgets in a Blazor application, please follow the How to use DevExtreme widgets in Blazor applications article.


 
17 February 2021
Alex B (DevExpress)
Alex B (DevExpress)
> How can you allow Single Sign on with this?

Single sign-on (SSO) is rather related to the way your server-side services process authentication tokens/credentials passed from the client. Since DevExtreme Angular is a client-side UI library, it can't control the server-side authentication flow. It's up to you how to implement it in your backend.

If you have questions on how to integrate your backend with our client-side templates, feel free to submit a support ticket to our Support Center.
17 February 2021

Please login or register to post comments.