React

All our handlers have been created, now it's time to connect our server to the client.
Remember including Cors::permissive() as one of the middle ware services available for the server, this will enable our client connect to the server. Also keep in mind that this particular way of granting access to an external service is only for development, Cors::default() is the standard for production.

Create Client

# run the setup command
npx create-reat-app client

Delete the following files in the src & public directory except.

src/App.js
src/index.js
src/reportWebVitals.js
public/index.html
public/favicon.ico
public/manifest.json
public/robot.txt

Update the following files, as seen on the repo
public/index.html
public/manifest.json
src/index.js

Using Axios

In this context axios is used to send request from our JavaScript client to our Rust server and also receive response from our Rust server to our JavaScript client, install axios.

Create a new file in the src directory

// src/config.js
export const INVITATION = 'http://localhost:8080/api/invitation';
export const REGISTER = "http://localhost:8080/api/register";
export const FOMO = "http://localhost:8080/api/auth";

Each constant variable represent routes for request handlers we previously defined.

Update src/App.js

import axios from 'axios';
import { useState } from 'react';
import { INVITATION } from './config';
import { REGISTER } from './config';
import { FOMO } from './config';

const App = () => {

    const [path, setPath] = useState();

    const invitation = () => {
        axios.post(
            `${INVITATION}`, 
            {
                email: "[email protected]"
            },
            { 
                withCredentials: true 
            }
        ).then(res => console.log(res))
    }

    const register = () => {
        axios.post(
            `${REGISTER}/${path}`, 
            {
                password: "pikachu"
            },
            { 
                withCredentials: true 
            }
        ).then(res => console.log(res))
    }

    const fomo = () => {
        axios.post(
            `${FOMO}`, 
            {
                email: "[email protected]",
                password: "pikachu"
            },
            {
                withCredentials: true
            }
        ).then(res => console.log(res))
    }

    return(
        <>
            <div>
                <button onClick={invitation}>
                Invitation
                </button><br />
                <form>
                    <input type="text" onChange={(e) => setPath(e.target.value)}/>
                    <button onClick={register}>
                    register
                    </button>
                </form>
                <br />
                <button onClick={fomo}>
                fomo
                </button>
            </div>
        </>
    )
}

export default App;