DevExtreme React Application Template – Authentication UI (v20.1)

DevExtreme Team Blog
12 November 2020
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 ? : '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.
No Comments

Please login or register to post comments.