zinedkaloc

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>

zinedkaloc

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>

zinedkaloc

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>

zinedkaloc

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>
  );

zinedkaloc

export function Redirect() {
  return (
    <div style={{ margin: '20px 20px' }}>
      You are redirecting to the profile page...
    </div>
  );
}

zinedkaloc

export function Home() {
  return (
    <div style={{ margin: '20px 20px' }}>
      <p>Welcome, John Doe !</p>
    </div>
  );
}

zinedkaloc

import { createClient } from 'altogic';

// This `envUrl` and `clientKey` is sample you need to create your own.
let envUrl = 'https://auth.c1-na.altogic.com';
let clientKey = 'e574fee1fb2b443...a8598ca68b7d8';

const altogic = createClient(envUrl, clientKey);

export { altogic };

zinedkaloc

import { useRef, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { altogic } from '../helpers/altogic';

export function Signup() {
  const emailRef = useRef();
  const passwordRef = useRef();
  const [errors, setError] = useState(null);
  const navigate = useNavigate();

zinedkaloc

import React, { useContext, useState, useEffect } from 'react';
import { altogic } from '../helpers/altogic';

const AuthContext = React.createContext();
export function useAuth() {
  return useContext(AuthContext);
}
export function AuthProvider({ children }) {
  const [user, setUser] = useState();
  const [session, setSession] = useState();

zinedkaloc

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';
import { AuthProvider } from './contexts/Auth';

export default function App() {
  return (