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.
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.