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

DevExtreme React Application Template v20.1 includes new user authentication forms and a client-side API that you can easily integrate with your backend.

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.

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.

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.

Authentication forms are available for both our Angular and Vue Application Templates.

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:

Please help us shape the long-term direction of our Application Template Roadmap by responding to the following survey questions: