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

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.

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.

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.

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.

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.