To add Authentication to your Laravel API Vite React App, all you need is one Bash command, run it from your Git Terminal in Windows PC: 4 COMMANDS!

Version 3

This version added option to install required packages as an option because for existing script, they may already have it and not needed to run npm install command

rm -f add-loginv3.sh
curl -o ./add-loginv3.sh https://www.webune.com/forums/bash-script-add-login-to-react-vite-with-laravel-version-3.html
chmod +x add-loginv3.sh
./add-loginv3.sh

Version 2

This version added option to install required packages as an option because for existing script, they may already have it and not needed to run npm install command

rm -f add-loginv2.sh
curl -o ./add-loginv2.sh https://www.webune.com/forums/vite-login-bash-script-202306222251.html
chmod +x add-loginv2.sh
./add-loginv2.sh

Version 1

rm -f add-login.sh
curl -o ./add-login.sh https://www.webune.com/forums/vite-login-bash-script-20230310.html
chmod +x add-login.sh
./add-login.sh

add-login.sh source:  /f/apachefriends/xampp/htdocs/over-imgV5/REACT/MYOWN/vite-upload-login

Tutorial https://www.webune.com/forums/vite-login-bash-script-20230310.html

The script above installs the appropiate packages and download the necessary files associated with this post. See the related pages in this post.

The rest of the content below are just notes

1. Create a VITE React APP

npm create vite@latest [app-name] --template
cd [app-name]
code .
npm install
npm run dev

cd

  1. Create a blank Vite > React App
  3. Install packages
    axios - $ npm i axios
    import axios from "axios";

    bootstrap - $ npm i bootstrap
    In App.jsx Add:
    import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  4. Add components/context Folder:
    $ mkdir -p src/components/context
    $ mkdir -p src/components/views
  5. Download ContextProvider.jsx
    $ curl -o src/components/context/ContextProvider.jsx https://www.webune.com/forums/ContextProvider.jsx.html
  6. Download Login.jsx
    $ curl -o src/components/views/ContextProvider.jsx https://www.webune.com/forums/Login.jsx.html

To view the source code in the video: https://github.com/thecodeholic/laravel-react-starter

qJq9ZMB2Was

you will need the following files to add to a vite/react app:

ContextProvider.jsx