Welcome to this tutorial on how to build a full-stack application with Amplication.
What we will do is go step by step to create a Todos
application using React for your frontend and Amplication for your backend.
If you get stuck, have any questions, or just want to say hi to other Amplication developers like yourself, then you should join our Discord!
Table of Contents
- Step 1 - axios
- Step 2 - Authorization Requests
- Step 3 - The Auth Component
- Step 4 - Login
- Step 5 - Wrap Up
Step 1 - axios
-
To allow users to sign in to the
Todos
application we'll need to prompt them for the username and password and then verify it with the backend. To make the HTTP request to the backend we'll use a library called axios. First, install axios as a dependency in theweb
subfolder:
cd web npm install axios
-
We'll want to configure axios to use a user's access token when making requests to the backend and have easy access to the axios library, so we'll need to set up an interceptor as well as some other functions. Create the following file
web/src/lib/http.js
and at the top of the file import axios.
import axios from "axios";
-
Then paste in the following code. Now every request that axios makes will take the user's JWT access token, which will be stored in local storage, and assign it to the Authorization header of every request.
const apiUrl = "http://localhost:3000"; const jwtKey = "accessToken"; axios.interceptors.request.use( (config) => { const { origin } = new URL(config.url); const allowedOrigins = [apiUrl]; const accessToken = localStorage.getItem(jwtKey); if (allowedOrigins.includes(origin)) { config.headers.authorization = `Bearer ${accessToken}`; } return config; }, (error) => { return Promise.reject(error); } );
-
To simplify some tasks we'll add a function that generates the full URL of an API request when provided the endpoint, a function that checks if an access token already exists in local storage, and a function to save an access token in local storage.
export const createUrl = (endpoint) => new URL(endpoint, apiUrl).href; export const isStoredJwt = () => Boolean(localStorage.getItem(jwtKey)); export const setStoredJwt = (accessToken) => localStorage.setItem(jwtKey, accessToken);
-
Finally, we'll want to expose the
get
,patch
, andpost
methods axios provides.
export const get = axios.get; export const patch = axios.patch; export const post = axios.post;
Step 2 - Authorization Requests
Instead of calling our API endpoints with axios directly from our components, we will abstract the logic of the requests so if we ever need to make changes to the behavior of the code we can do it in just one place.
-
Create the following file
web/src/lib/auth.js
and at the top of the file, we'll import some of the functions we created in theweb/src/lib/http.js
file.
import { createUrl, get, isStoredJwt, post, setStoredJwt } from "./http";
-
First, add the
me
function.me
will check if we have an access token stored, because if there is none then there is no way this request would succeed. If the token exists, it will make aGET
request to the/api/me
endpoint we created in Tutorial Step 3. On the success of the request, the current user's user object will be returned.
export const me = async () => { return isStoredJwt() ? (await get(createUrl("/api/me")).catch(() => null))?.data : null; };
-
Next, add the
login
function.login
will make aPOST
request to the/api/login
endpoint, sending the username and password of our user. If the request fails, like when a user doesn't exist, an alert will pop up notifying the user of the failure. If the request succeeds the access token will be saved into local storage, and then theme
function will be called to return the current user's user object.
export const login = async (username, password) => { const result = ( await post(createUrl("/api/login"), { username, password }).catch( () => null ) )?.data; if (!result) { return alert("Could not login"); } setStoredJwt(result.accessToken); return me(); };
-
Finally, add the
signup
function.signup
will make aPOST
request to the/api/signup
endpoint, which we also created in Tutorial Step 3, sending the username and password of our new user. If the request fails, like if the username is already used, an alert will pop up notifying the user of the failure. If the request succeeds the access token will be saved into local storage, and then theme
function will be called to return the current user's user object.
export const signup = async (username, password) => { const result = ( await post(createUrl("/api/signup"), { username, password }).catch( () => null ) )?.data; if (!result) { return alert("Could not sign up"); } setStoredJwt(result.accessToken); return me(); };
Step 3 - The Auth Component
-
We need a component that can collect the username and password from the user and then make the appropriate request with the functions we just added. Create
web/src/Auth.js
and paste the following code:
import { useState } from "react"; import { login, signup } from "./lib/auth"; export default function Auth({ setUser }) { const [isLogin, setIsLogin] = useState(true); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [confirm, setConfirm] = useState(""); const handleUsernameChange = (e) => setUsername(e.target.value.toLowerCase()); const handlePasswordChange = (e) => setPassword(e.target.value); const handleConfirmChange = (e) => setConfirm(e.target.value); const handleSubmit = async (e) => { e.preventDefault(); const func = isLogin ? login : signup; if (!isLogin) { if (password !== confirm) { return alert("Passwords do not match"); } } const result = await func(username, password); setUser(result); }; return ( <div> <form onSubmit={handleSubmit}> <h2>{isLogin ? "Login" : "Sign Up"}</h2> <input name="username" type="text" placeholder="username" value={username} onChange={handleUsernameChange} required /> <input name="password" type="password" placeholder="password" value={password} onChange={handlePasswordChange} required /> {!isLogin && ( <input name="confirmPassword" type="password" placeholder="confirm password" value={confirm} onChange={handleConfirmChange} required /> )} <button type="submit">Submit</button> <button type="button" onClick={() => setIsLogin(!isLogin)}> {isLogin ? "Need an account?" : "Already have an account?"} </button> </form> </div> ); }
This component renders a form to the user prompting them for their username and password to log in. If they don't have an account yet then a button on the bottom of the page will toggle the form to be for creating a new account, which adds a new field for a user to confirm their password.
On submit the login
or signup
function from web/src/lib/auth.js
is called, and the result is passed into the setUser
function.
Step 4 - Login
-
With the authentication component created we just need to show it to users. Start by replacing the imports at the top of
web/src/App.js
with this:
import { useState, useEffect } from "react"; import "./App.css"; import { me } from "./lib/auth"; import Auth from "./Auth"; import CreateTask from "./CreateTask"; import Tasks from "./Tasks";
-
Then create a
user
andsetUser
and add the followinguseEffect
hook. We've created ouruser
variable and can update it with thesetUser
function. We've also implemented theuseEffect
hook, which will allow code to be executed when the component mounts. So, when theApp
component mounts, we call theme
function fromweb/src/lib/auth.js
to set the current user to ouruser
variable.
function App() { + const [user, setUser] = useState(); const [tasks, setTasks] = useState([]); + useEffect(() => { + async function getUser() { + const result = await me(); + setUser(result); + } + getUser(); + }, [setUser]);
-
Finally, replace the
return
with below. Now if auser
object exists, which only occurs when they're logged in, the application will show the user's tasks. If auser
object doesn't exist they are shown the auth screen, which when a user logs in or signs up, will set theuser
variable with thesetUser
function that is passed into it.
return ( <div> {user ? ( <div> <CreateTask addTask={addTask} /> <Tasks tasks={tasks} toggleCompleted={toggleCompleted} /> </div> ) : ( <Auth setUser={setUser} /> )} </div> );
Step 5 - Wrap Up
Run the application and try creating a new account.
Users are now able to login to the Todos
application, but we're not saving their tasks in our backend yet... That'll have to be next.
Check back next week for step five, or visit the Amplication docs site for the full guide now!
To view the changes for this step, visit here.
Discussion (0)