DevExtreme React Application Template v20.1 includes new user authentication forms and a client-side API that you can easily integrate with your backend.
Authentication Forms
We added new Sign In, Sign Up, Reset and Change Password forms to our React Application Template. These forms comply with today’s most common web-based password authentication patterns/workflows. Of course, you can easily customize our 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 in use. For your convenience, we placed all these handlers in a single file (/src/api/auth.js). Please refer to
our documentation for more details.
Access Authenticated User Data
We implemented a new `useAuth` React Hook to give you access to authenticated user data from any part of your application. The code below helps demonstrate this capability:
import React from 'react';
import { useAuth } from './contexts/auth';
export default function() {
const { user } = useAuth();
return <div>{ user ? user.email : 'Not authenticated' }</div>;
}
Note that we implemented our React Application Template using React Hooks and functional components (best practice according to the React team). You can learn more about React Hooks
here.
Angular and Vue
Authentication forms are available for both our
Angular and
Vue Application Templates.
Give it a Try
To explore these capabilities first-hand, you can download our demo app and associated source code or view a short introductory video using the links below:
Your Feedback Counts
Please help us shape the long-term direction of our Application Template Roadmap by responding to the following survey questions:
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.