The auth module includes pages which accept information used for authetication and it provides authorization context to pages in other relevant pages.
auth/
├── components/
│ └── AuthForm.tsx
├── context/
│ └── AuthContext.tsx
├── pages/
│ ├── LoginPage.tsx
│ ├── RegisterPage.tsx
│ ├── ResetPasswordPage.tsx
│ ├── SignupPage.tsx
│ └── VerifyPage.tsx
├── services/
│ └── authApi.ts
└── state/
└── useAuth.ts
- Authorization: Contains the credentials to authenticate a user-agent with a server.
- Content-Type: Indicates the media type of the resource.
- CORS: implemented by
cors_layer middleware in back end which restricts the ability to load resources to specified origins
- CSRF: implemented by
csrf_layer middleware in back end which protects against malicious requests by associating a unique random token for every form in a given session
- Input Sanitization: resolved by React by default which escapes string variables in views automatically, foregoing the need to sanitize input as code can not be injected
- XSS: resolved by React by default which escapes string variables in views automatically, preventing injected code
Form to be used for authentication and sending information to backend for processing, verification, and storage.
- Wrapped in
BaseLayoutUnauthenticated element
- Contains: login form, reset password form
- Links to: signup, waitlist
- Depending on
showModal state displays additional page content including reset password form
- useEffect resets
showModal state on page load
- Contains: resgistration form, aysnc function to register form inputs
- Links to: /profile (on successful form submition)
- Wrapped in
BaseLayoutUnauthenticated element, with Header and Footer elements
- Contains: reset password form
- Wrapped in
BaseLayoutUnauthenticated element, with HeaderUnauthenticated and Footer elements
- Contains: sign up form
- useEffect calls verify function to attempt to verify email on
token state change
import { createContext, useContext, useEffect, useState } from "react";
import { useNavigate, Link, useSearchParams } from "react-router-dom";
import BaseLayout from "../../core/components/BaseLayoutUnauthenticated";
import { register } from "../services/authApi";
import Footer from "../../core/components/Footer";
import Header from "../../core/components/Header";
import HeaderUnauthenticated from "../../core/components/HeaderUnauthenticated";
createContext: Lets you create a Context that components can provide or read.useContext: Accepts a context object and returns the current context value.useEffect: Accepts a function that contains imperative, possibly effectful code.useState: Returns a stateful value, and a function to update it.useNavigate: Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.Link: A progressively enhanced <a href> wrapper to enable navigation with client-side routing.useSearchParams: Returns a tuple of the current URL's URLSearchParams and a function to update them. Setting the search params causes a navigation.BaseLayout: Element providing universal basic layoutregister: Async function that fetches email, password, and nameFooter: Element providing universal page footerHeader: Element providing universal page headerHeaderUnauthenticated: Element providing universal page header when user is not signed in
const AuthContext = createContext<AuthContextType | undefined>(undefined);
const [showModal, setShowModal] = useState(false);
const [email, setEmail] = useState("");
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState<string | null>(null);
const navigate = useNavigate();
const [params] = useSearchParams();
const [message, setMessage] = useState("Verifying...");
const token = params.get("token");
const TOKEN_KEY = "auth_token";
- returned by
AuthProvider() function providing global access to an authentication element
showModal: Determines the display status of additional forgot password form based on stateemail: Stores provided email
showModal: Determines the display status of additional forgot password form based on stateemail: Stores provided emailname: Stores provided namepassword: Stores provided passworderror: Stores provided error message to display in case error occursnavigate: Used to navigate to /profile
params: Used to set state of tokenmessage: Stores given message to be displayedtoken: Stores token used to verify email
- Stores token used for authentication
| Method |
Path |
Field |
Type |
| POST |
/auth/login |
email |
email |
| POST |
/auth/login |
password |
password |
| Method |
Path |
Field |
Type |
| POST |
/auth/forgot-password |
email |
email |
| Method |
Path |
Field |
Type |
| GET |
. |
name |
text |
| GET |
. |
email |
email |
| GET |
. |
password |
password |
| Method |
Path |
Field |
Type |
| POST |
. |
password |
password |
| POST |
. |
confirm password |
password |
| Method |
Path |
Field |
Type |
| POST |
/request_account |
email |
email |
| POST |
/request_account |
password |
password |
| POST |
/request_account |
confirm password |
password |
| POST |
/request_account |
zipcode |
text |
| POST |
/request_account |
terms |
checkbox |
interface AuthContextType {
token: string | null;
userId: string | null;
isAuthenticated: boolean;
login: (token: string, userId: string) => void;
logout: () => void;
}
- Contains states and functions used in
AuthProvider() that control authentication
AuthProvider()
- tracks and updates current authentication state
- export
- param:
{ children }: { children: React.ReactNode }
function login()
- sets state of
token and userId to the respective given string
- param:
newToken: string, userId: string
logout()
- sets state of
token and userId to null
useAuth()
- sets context to
AuthContext
- export
RegisterPage()
- displays registeration page
- export default (React component)
handleSubmit()
- Handles form submition and registration
- async
- param:
e: React.FormEvent
VerifyPage()
- handles email verification and returns element indicating status of verification
- export default (React component)
verify()
- when token is set, displays message indicating status of verification
- async
login()
- fetches
/auth/login, returns json string of email and password
- export
- async
- param:
email: string, password: string
register()
- fetches
/auth/register, returns json string of email, password, and name
- export
- async
- param:
email: string, password: string, name: string
useAuth()
- stores and tracks state of token and userId locally
- export
loginWithToken()
- sets state of
token and userId to the respective given string and adds TOKEN_KEY to local storage
- param:
token: string, userId: string
logout()
- sets state of
token and userId to null and removes TOKEN_KEY from local storage
- Add support for 2FA
- Add support for alternative login methods (i.e. Google, Facebook, Apple, etc.)
components/AuthForm.tsx is empty