Introduction
Altogic is a Backend as a Service (BaaS) platform and provides a variety of services in modern web and mobile development. Most of the modern applications using React or other libraries/frameworks require to know the identity of a user. And this necessity allows an app to securely save user data and session in the cloud and provide more personalized functionalities and views to users.
Altogic has an Authentication service that integrates and implements well in JAMstack apps. It has a ready-to-use Javascript client library, and it supports many authentication providers such as email/password, phone number, magic link, and providers like Google, Facebook, Twitter, Github, etc.,
In this tutorial, we will implement email/password authentication with React and take a look how as a React developer we build applications and integrate with Altogic Authentication.
After completion of this tutorial, you will learn:
- How to create sample screens to display forms like login and signup.
- How to create a home screen and authorize only logged in users.
- How to create different routes using the react-router-dom.
- How to create an authentication flow by conditionally rendering between these pages whether a user is logged-in or not.
- And we will integrate Altogic authentication with the email/password method.
If you are new to React applications, this tutorial is definitely for you to understand the basics and even advanced concepts.
Prerequisites
To complete this tutorial, make sure you have installed following tools and utilities on your local development environment.
Creating a React app
The initial step is creating a new React app, so we will use npx to create. Open your favorite terminal window, and execute the following command.
npx create-react-app altogic-starter-app
That will create a React application with the altogic-starter-app name of the project directory.
After the initialization completed, you will see the result as the screenshot below. Let's change directory to the created directory with the given directions from the terminal's output.
cd altogic-starter-app
🎈Before running npm start as given direction, let's install react-router-dom for DOM manipulation inside of the altogic-starter-app
# using npm
npm install react-router-dom
# OR is using yarn
yarn add react-router-dom
Side-note: The current version of react-router-dom is 6. Make sure to check out the official documentation, as some of the installation instructions might have changed since the writing of this tutorial.
Open VSCode and start coding
Once we create a react-app with the create-react-app the folder structure will be like the following,
Let's create a components folder inside of the src/ folder. To export Signup, Home, Verification, Redirect and Login components create files as below.
- Home.js
- Login.js
- Redirect.js
- Signup.js
- Verification.js
If everything is okay, open the App.js and replace the following code.
Here we define the routes that we will use in our application. We will render different components when users visit different URLs.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Home } from "./components/Home";
import { Signup } from "./components/Signup";
import { Verification } from "./components/Verification";
import { Redirect } from "./components/Redirect";
import { Login } from "./components/Login";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signup" element={<Signup />} />
<Route path="/auth-redirect" element={<Redirect />} />
<Route path="/verification" element={<Verification />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
Alright! We have prepared routes and initial files for our app. Before starting, let’s take an overview of the authentication flow.
Here are Login and Signup components to collect information from the user.
Once the user created successfully, our react app will route the user to the Verification page, and a verification email will be sent to the user’s email address. When the user clicks the link in the mail, the user will navigate to the redirect page to grant authentication rights. After successfully creating a session on the Redirect page, users will be redirected to the Home page.
Creating components
Let’s go with the Signup component first and implement each one step by step.
So…
Open the Signup.js from the components folder and replace the following code.
import { Link } from "react-router-dom";
export function Signup() {
return (
// Create signup form with email, password, and submit button
<div style={{ margin: "20px 20px" }}>
<h1>Signup</h1>
<form>
<label>Email:</label>
<input type="text" name="email" />
<label>Password:</label>
<input type="password" name="password" />
<input type="submit" value="Signup" />
</form>
<p>
{" "}
Already have an account? <Link to="/login">Login</Link>
</p>
</div>
);
}
Open the terminal and type npm run start to start the react app in the created directory and visit https://localhost:3000/signup
And voilà! Here we can see;
- Form group to collect input from the user such as email and password.
- Signup button to handle form submit requests.
- Login link to route users the login page.
Let’s open the Login.js and paste the below code block.
import { Link } from "react-router-dom";
export function Login() {
return (
// Create login form with email, password, and submit button
<div style={{ margin: "20px 20px" }}>
<h1>Login</h1>
<form>
<label>Email:</label>
<input type="text" name="email" />
<label>Password:</label>
<input type="password" name="password" />
<input type="submit" value="Signup" />
</form>
<p>
{" "}
Don't you have an account? <Link to="/signup">Signup</Link>
</p>
</div>
);
}
Well, your Login and Signup pages are ready, and let’s continue with the straightforward Verification page to let users know that they need to verify their email address.
Open Verification.js and paste below code block.
export function Verification() {
return (
// Add verification text to inform user
<div style={{ margin: "20px 20px" }}>
<h1>Verification</h1>
<div style={{ display: "flex", alignItems: "center" }}>
<p>Please check your email for a verification link.</p>
</div>
</div>
);
}
Open Redirect.js and paste below code block.
export function Redirect() {
return <div style={{ margin: "20px 20px" }}>You are redirecting...</div>;
}
And the last part is Home.js let’s paste the below code block.
export function Home() {
return (
<div style={{ margin: "20px 20px" }}>
<p>Welcome, John Doe !</p>
</div>
);
}
Conclusion
We have prepared initial files and routes for our starter app, in the next tutorial we will wire frontend with the backend and congratulations, you have completed the first part of the tutorial, so let's continue with the next part.