Creating an Authentication App

Create a simple web application using the features of Catalyst Authentication that provides user sign-up, application login, password reset, and implements Zoho and Google sign-in providers.

Introduction

This tutorial will help you build a simple web client application that authenticates the end users and displays their user profile information.

The user authentication in this app is implemented using the features of Catalyst Authentication. Refer to our help documentation on Catalyst Authentication for detailed help on the Authentication features.

We will provide the following functionalities in the Authentication app:

  • Sign up to the web app using email address
  • Log in to the app using the sign-up account information
  • Log in to the app using Zoho sign-in provider
  • Log in to the app using Google sign-in provider
  • Reset the password, in case the user forgets their password
  • View profile information after logging in
  • Log out of the application

The client application will look like this:

You can access a working application and test its functioning here: https://authentication.zohocatalystapp.com/app/.

The Authentication app contains only the front end client component that is hosted on Catalyst through web client hosting.

Note: This web client application does not implement any Catalyst functions.

The Authentication app incorporates the following features of Catalyst Authentication:

  • Users: The user profiles are automatically saved in this section when they sign up for the application. You can view the list of users from the Users section under Authentication in the console.
  • Sign-in Method: We will enable Zoho and Google sign-in providers for this application from the Sign-in Method section in the console.
  • Email Templates: We will customize the templates of the sign-up verification and password reset emails that will be sent to the users from the Email Templates section.

We will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application.

You will be given the code for the files to be included in the client directory of your project in this tutorial. You will just need to copy the provided code and paste it into the appropriate files as directed.