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 ? 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:

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
2 comment(s)
Holger Böcher
Holger Böcher

Hi Alex,

an Example App with a complete Stack would be helpful.

Say ...

  • a docker image containing sample data
  • some node/express code to meme a REST Service
  • the DevAv Demo for example on top of it

Greetings

Holger

19 November 2020
Alex B (DevExpress)
Alex B (DevExpress)

Hi Holger,

Thank you for your feedback. Your suggestion makes sense, and we'll consider creating a fullstack user authentication example. The problem here is that DevExtreme is server-agnostic, and the back-end API is not limited to JS/Node/Express. We might need to create a set of examples for the most popular back-end technologies. Anyway, if you face issues when integrating our React Authentication UI with your back-end, feel free to issue a support ticket. We'll do our best to assist you.

19 November 2020

Please login or register to post comments.