Full Stack Authentication

1. Setup Server

https://github.com/Ironhackers-OCT21/react-auth-server-starter

Fork this repo
Clone this repo

$ cd react-auth-server-starter
$ npm install
$ npm run dev

2. Set up the Model and Routes in your server side code

Create a Schema and a Model

Update the already present User.model.js file in your models folder and replace the corresponding code to it. Make sure you understand before copy-pasting it.

https://gist.github.com/ManishPoduval/c5add369f89bde67f9f26f387c9cbecd

Create Routes

Create a auth.routes.js file in your routes folder and add the corresponding routes to it

https://gist.github.com/ManishPoduval/2f6c0ecc1269bc7e090879fce947940f

Link Routes in `app.js`

Make sure you don't forget to link all the routes you just created in your app.js file

const authRoutes = require("./routes/auth.routes");
app.use("/api", authRoutes);

Once you've linked it, your app.js file might look like this somewhat

3. Understand `express-session` and `connect-mongo` setup

Note: You don't have to write this piece of code. It is already present in app.js :)

4. React side setup

You can use the same client code we did in class on Friday. Or you can clone this code

https://github.com/Ironhackers-OCT21/react-auth-client-starter

Fork this repo
Clone this repo

$ cd react-auth-client-starter
$ npm install
$ npm run start

4. Install Material UI

We will use material UI to create our SignIn and SignUp components

Go to https://mui.com/getting-started/installation/ and follow the setup steps.

Run

npm install @mui/material @emotion/react @emotion/styled

5. Create SignUp - SignIn pages

We'll create two simple components to show the user the SignUp and SignIn pages

Create SignIn form

In your components folder create a simple SignIn.js file and add the below form

https://gist.github.com/ManishPoduval/1cb3c1ba0ebe49d1d4f7a3e2c4c7a133

Create SignUp form

In your components folder create a simple SignUp.js file and add the below form

https://gist.github.com/ManishPoduval/79c9017b16512b5cfbde2cf96b37d956

Both the forms are from material ui, you'll find the same code in the docs of material ui - templates

We'll need two Nav button to take the user to a sign-in page and a sign-up page.

Add links in your `MyNav.js` file

<Link  style={{marginLeft: '10px'}}  to="/signin">SignIn</Link>
<Link  style={{marginLeft: '10px'}}  to="/signup">SignUp</Link>

Create corresponding routes for those links

Now that the links are setup and the pages are ready, all we are left to do is to render the corresponding components when the user visits those urls.

Add these routes in your App.js component

<Route  path="/signin" element={<SignIn />}/>
<Route  path="/signup" element={<SignUp />}/>

*Don't forget to import the SignIn, SignUp components in App.js if it's not automatically imported

We're all set. Now pay attention to what we do in class!

Happy coding! ❤️

ManishPoduval/FullStackAuth.md