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: () => { 
  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.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.