
# Here is a tutorial on how to build sign-in and sign-up pages and store the user in a context in a Next.js app.

If you want you can clone this repo to get the code for the tutorial:

```bash
git clone https://github.com/JIdayyy/authentication-next-typescript
cd authentication-next-typescript
npm install
npm run dev
```

Then you need to create a folder in the pages folder called `auth` and create two files in it called `signin.tsx` and `signup.tsx`.

On those pages we will create two forms, one for signing in and one for signing up. We will also create a context to store the user in.

## Context.

The idea here is to create a context that will store the user and provide it to the rest of the app. We will use the `useContext` hook to access the user.

First, create the src folder and inside it create a folder called `context` and inside it create a file called `UserContext.tsx`.

In this file, you will create the `UserContext`.
First, import the method `createContext` from React and create the user context.

```ts
import { createContext } from "react";

const UserContext = createContext({});
```

As you know, we use Typescript so we have to create a type for our context.
In the same file create an interface `IUserContext` and a `User` type like the one below:

```ts
type TUser = {
  id: string;
  email: string;
  name: string;
  avatar: string;
  createdAt: string;
  updatedAt: string;
};

interface IUserContext {
  user: TUser | null;
  isAuth: boolean;
  signIn: (credentials: TCredentials) => Promise<void>;
  signOut: () => Promise<void>;
}
```

As you can see our interface has 4 keys, one containing the User one is a boolean which will be true/false if the user is connected or not and two methods signIn & signOut wich will handle the API call, the token logic and set the user state.
The User type represent our User.

When those types are good, we need to type our context like this :

```ts
const UserContext = createContext<IUserContext | null>(null);
```

Now let's create our context provider.

```ts
type TUserContextProviderProps = {
  children: React.ReactNode;
};

const UserContextProvider = ({ children }: TUserContextProviderProps) => {
  return <UserContext.Provider>{children}</UserContext.Provider>;
};
```

This component will handle all the logic of our authentication flow.
We will create a state inside with two keys, isAuth, and user.

```ts
type AuthState = {
  user: TUser | null;
  isAuth: boolean;
};

const UserContextProvider = ({ children }: TUserContextProviderProps) => {
  const [authState, setAuthState] = useState<AuthState>({
    user: null,
    isAuth: false,
  });

  return <UserContext.Provider>{children}</UserContext.Provider>;
};
```

Good, now we have our state in the provider, we have now to create the signIn and signOut methods to authenticate our users.

In a separate file create an instance of Axios like this :

```ts
//src/utils/axiosInstance.ts
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL || "SERVER_URL",
  withCredentials: true,
});

export default axiosInstance;
```

Don't forget to add the server URL in your .env file.
We will use this instance of Axios in our provider to import it.

The `sign` is a function that take an object as an argument with two keys : email & password.

```ts
const signIn = async ({ email, password }: TCredentials) => {
  try {
    const { data, headers } = await axiosInstance.post("/auth/signin", {
      email,
      password,
    });
    setAuthState((state) => ({
      isAuth: true,
      user: data,
    }));
    const token = headers["authorization"];
    axiosInstance.defaults.headers.common["authorization"] = token;
    localStorage.setItem("token", token || "");
  } catch (error) {
    console.log(error);
  }
};
```

This function makes a post request to our signin endpoint, sets the user in the response body in our state, and passes the isAuth key at `true`.
Here the jwt token is in the authorization header, so we get it from the Axios response headers and set it in the local storage.

For the signOut method, it is way more simple, the function simply set the user state key as null and the isAuth key as false and removes the token from the local storage.

```ts
const signOut = async () => {
  setAuthState({
    user: null,
    isAuth: false,
  });

  localStorage.removeItem("token");
  axiosInstance.defaults.headers.common["authorization"] = "";
};
```

We have now to pass all this stuff to our provider like this

```ts
<UserContext.Provider
  value={{
    user: authState.user,
    isAuth: authState.isAuth,
    signIn,
    signOut,
  }}
>
  {children}
</UserContext.Provider>
```

At the end our UserContextProvider file should look like this :

```ts
// src/context/userContext.tsx
import { useRouter } from "next/router";
import { createContext, useContext, useState } from "react";
import axiosInstance from "../utils/axiosInstance";

type TUser = {
  id: string;
  email: string;
  name: string;
  avatar: string;
  createdAt: string;
  updatedAt: string;
};

interface IUserContext {
  user: TUser | null;
  isAuth: boolean;
  signIn: (credentials: TCredentials) => Promise<void>;
  signOut: () => Promise<void>;
}

type TUserContextProviderProps = {
  children: React.ReactNode;
};

type TCredentials = {
  email: string;
  password: string;
};

type AuthState = {
  user: TUser | null;
  isAuth: boolean;
};

const UserContext = createContext<IUserContext | null>(null);

const UserContextProvider = ({ children }: TUserContextProviderProps) => {
  const router = useRouter();
  const [authState, setAuthState] = useState<AuthState>({
    user: null,
    isAuth: false,
  });

  const signIn = async ({ email, password }: TCredentials) => {
    try {
      const { data, headers } = await axiosInstance.post("/auth/signin", {
        email,
        password,
      });
      setAuthState((state) => ({
        isAuth: true,
        user: data,
      }));
      const token = headers["authorization"];
      axiosInstance.defaults.headers.common["authorization"] = token;
      localStorage.setItem("token", token || "");
      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

  const signOut = async () => {
    setAuthState({
      user: null,
      isAuth: false,
    });
    localStorage.removeItem("token");
    axiosInstance.defaults.headers.common["authorization"] = "";
    router.push("/auth/signin");
  };

  return (
    <UserContext.Provider
      value={{
        user: authState.user,
        isAuth: authState.isAuth,
        signIn,
        signOut,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

export default UserContextProvider;
```

To consume this context I use to create a custom hook in the same file like this :

```ts
// src/context/userContext.tsx
export const useAuth = () => {
  const context = useContext(UserContext);
  if (context === null) {
    throw new Error("useAuth must be used within a UserContextProvider");
  }
  return context;
};
```

As you can see we use the `useContext` hook to get the context and throw an error if the context is null.
With this hook we can use the context in our components like this :

```ts
export default function MyComponent() {
  const { user, isAuth, signIn, signOut } = useAuth();
  return <div>MyComponent</div>;
}
```

Don't forget to wrap your app with the provider in the `_app.tsx` file like this :

```ts
// pages/_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import UserContextProvider from "../src/context/UserContext";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <UserContextProvider>
      <Component {...pageProps} />
    </UserContextProvider>
  );
}
```

## Usage.

Now we can use the context in our components.
In the `signin.tsx` page we can use the `signIn` function like this :

```ts
// pages/auth/signin.tsx
import React from "react";
import { useAuth } from "../../src/context/UserContext";

type Props = {};

export default function Signin({}: Props) {
  const { signIn } = useAuth();
  const [credentials, setCredentials] = React.useState({
    email: "",
    password: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCredentials({
      ...credentials,
      [e.target.name]: e.target.value,
    });
  };

  return <div>// You form component here</div>;
}
```

And in the `index.tsx` page we can use the `signOut` function like this :

```ts
// pages/index.tsx
import { useAuth } from "../src/context/UserContext";

export default function Home() {
  const { signOut } = useAuth();
  return (
    <div>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}
```

I know there is a lot of information here, but in the end, it is not that complicated to implement a context in your nextjs app and it is really useful to manage your user state.
Once you have done this you can use the context in all your components and pages to get the user informations like the email or avatar.
The token is also stored in the localStorage so you can use it to make authenticated requests to your backend.

If you want to know how to implement authentication on the server side check this link : [Server authentication on express](https://tutorials.jidayyy.com/tutorial/server-authentication-on-express)

If you have any questions or suggestions feel free to ask in the comments ( you have to be logged in first 🚀 !).





Here is a tutorial on how to authenticate users in a NextJS application

NextJS Authentication


If you have allready build forms with React, you know how messy it can become.
At the end of this tutorial you will be able to handle multiple inputs with a single function. 
( We will not talk about form validation here ... )

Take a look at this code : 

```js
<form>
  <label>
    Name:
    <input type="text" name="name" />
   
  </label>

  <label>
    Password:
   <input type="password" name="password" />
  </label>
</form>
```

As you can see we have two inputs with two differents name, "name" and "password".

If you want to retrieve the value of these inputs, you use to add two states inside your component and in the onChange attribute you set the setState function to handle the event and set the value in the state.

Here we will only build a single state wich value will be an object.

```js
  const [formState, setFormState] = useState({
    name: "",
    password: "",
  });
```

To mutate this state we will create a function "handleChange" to get the fired input value and set the value to the proper state object key.

```js
  const handleChange = (e) => {
    setFormState((state) => ({
      ...state,
      [e.target.name]: e.target.value,
    }));
  };
```

The handleChange method take the event as argument and inside we will call the setState function.
As you know you can pass a callback to the setState method and this callback allways provide the previous state as param.

We will use this param to keep the key we don't want to mutate in our state, and we will use the `name` of the input and the `value` stored in the event object to store our changes in the state.

```js
{
      ...state,
      [e.target.name]: e.target.value,
}
```
I know this part is a bit weird for you, but don't worry we will talk about it.
If you know nothing about object desctucturing or rest please take a look [here !](https://www.digitalocean.com/community/tutorials/understanding-destructuring-rest-parameters-and-spread-syntax-in-javascript)

As you can see our input have a `name` and a `value` attribute.

```js
<input type="text" name="name" value={formState.name} onChange={handleChange} />
```

Each time a user fire our input it will trigger an event this input will call our handleChange method and pass it an `event` object. In this object you can get the `name` and `value` in order to update our state.
So in the setState method we return an object and pass it the previous state ( imagine if the user has allready fill some fields, you don't wan't to reset the entire state object ) and only add/update the key related to the fired input.

At the end our code should look like this : 
```js
function FormTest() {
  const [formState, setFormState] = useState({
    name: "",
    password: "",
  });

  const handleChange = (e) => {
    setFormState((state) => ({
      ...state,
      [e.target.name]: e.target.value,
    }));
  };

  return (
    <form>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formState.name}
          onChange={handleChange}
        />
      </label>

      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formState.password}
          onChange={handleChange}
        />
      </label>
    </form>
  );
}
````
You can console.log the formState object to check how it change when you type in an input.

Don't hesitate to add a comment below if you want more precisions !! 🚀

In this tutorial we will discover how to handle multiple text inputs with one function.

Handle multiple text inputs with a single one function in React

This video by the great Grafikart explain how to work with POO and Javascript

Javascript Object oriented programing ( OOP)

# Exercice API with Prisma and Typescript!

Hi! Here is an exerice for you !
The goal is to build a simple API to manage:

- Books
- Collections
- Users ( Authors )

# Rules

You have to use Prisma, MySQL on Docker and Typescript.

## Setup

First you have to init a repo :

Once in the repo folder you have to initialize a new NodeJS application with :

```
npm init -y
```

## Install dependencies

In order to build your application you have to install some dependencies with npm :

- Express
- Express types
- Prisma and Prisma Client / [Documentation here](https://www.prisma.io/docs/getting-started/quickstart)
- Typescript ( dev dependency )
- Ts-node-dev ( dev dependency )

To install a dev dependency, use the -D flag with npm install like :

```
npm install -D typescript ts-node-dev
```

**Don't forget to create a .gitignore file and add the node_modules folder inside !!!**

## Scripts

When all the dependencies are setup you will have to create a dev script to launch the development server in the package.json file.

```json
"scripts": {

// add the line below to the script object

"dev": "ts-node-dev index.ts"

}
```

## Check

When the previous steps are done, your package.json should look like below:

```json
{
  "name": "2209-btz-exercice-api-prisma-ts",
  "version": "1.0.0",
  "description": "Hi! Here is an exerice for you ! The goal is to build a simple API to manage:",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/WildCodeSchool/2209-BTZ-exercice-api-prisma-ts.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/WildCodeSchool/2209-BTZ-exercice-api-prisma-ts/issues"
  },
  "homepage": "https://github.com/WildCodeSchool/2209-BTZ-exercice-api-prisma-ts#readme",
  "devDependencies": {
    "ts-node-dev": "^2.0.0",
    "typescript": "^4.9.3"
  },
  "dependencies": {
    "@prisma/client": "^4.7.1",
    "@types/express": "^4.17.14",
    "express": "^4.18.2",
    "prisma": "^4.7.1"
  }
}
```

## Init Typescript

In order to initialize typescript in your application you will now have to launch this command :

```
tsc --init
```

This will create a tsconfig.json file in the root folder of your application.

## Start a basic NodeJS/Express Http server

As you now know, Express is a minimal framework.
With Express you can build simple http servers very fast !

First, create a file app.ts like this :

```js
import Express from "express";

const app = Express();

app.use(Express.json());

app.get("/", (req, res) => {
  return res.status(200).json("Hello world");
});

export default app;
```

This file initialize the express aplication.
We will now create an index.ts file who will be the main start point of our application.

```js
import app from "./app";

const PORT = 5000;

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT} 🚀`);
});
```

Once this two files are ready try to launch the application with :

```
npm run dev
```

You should see this in the terminal :

```
Server is running on port 5000 🚀
```

In your favorite http client you can launch a GET request on http://localhost:5000 an you should see a "Hello world" message in the response.

# Prisma Schema

**Be sure your database is running on docker before going further !**

In order to have the synthax highlight in VSCode please install the Prisma extension.

Now we have to build our database ! Don't be afraid of this step !

Before Prisma, we used to build our databases with SQL queries... beurk !!
Now it is way more simple ! Take a look at it !
I don't give you the entire Schema for this application, just a sample, the rest is up to you !

**THIS IS NOT THE SCHEMA FOR THIS APPLICATION, IT IS A SAMPLE**

```js
model  User  {

id  String  @id  @unique  @default(uuid())

name  String

password  String

createdAt  DateTime  @default(now())

updatedAt  DateTime  @updatedAt

posts  Post[]

}

model  Post  {

id  String  @id  @unique  @default(uuid())

title  String

content  String

createdAt  DateTime  @default(now())

updatedAt  DateTime  @updatedAt

category  Category  @relation(fields: [categoryId], references: [id])

categoryId  String

author  User  @relation(fields: [authorId], references: [id])

authorId  String

isDisabled  Boolean  @default(false)

}

model  Category  {

id  String  @id  @unique  @default(uuid())

name  String

createdAt  DateTime  @default(now())

updatedAt  DateTime  @updatedAt

posts  Post[]

}
```

Now you should be able to understand how to build the book API schema.

## Prisma database connection

Prisma is able to connect with any type of database ( MySQL, postgreSQL, MongoDB ... ).
Once you run this command

```
npx prisma init
```

you should see a .env file at the root of your folder.
In this .env file there is a DATABASE_URL key with contain a connection string with all the informations to connect with your database.

The sample connection string look like so:

```
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
```

![enter image description here](https://res.cloudinary.com/prismaio/image/upload/v1628761154/docs/KkZe3hO.png)

- `postgresql://` is the database protocol for mysql use `mysql://`
- `johndoe` is your database username
- `randompassword`is the database password
- `localhost`is the database host, use localhost if your database is running on your system or in a docker container
- `5432` is the port your database is running on ( usually something like 3306 or 3308 for mysql ).
- `mydb`is the name of the database you wanna connect to

Once the connection string is ready go to the prisma.schema file and you should see this :

```
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator  client  {
provider = "prisma-client-js"
}

datasource  db  {
provider = "postgresql"
url = env("DATABASE_URL")
}
```

In the datasource section, there is a "provider" key, replace the value with your SGBD system type.

Example:
For mysql set up the provider like below :

```
datasource  db  {
provider = "mysql"
url = env("DATABASE_URL")
}
```

Now you should know how to replace those values in order to connect your Prisma application to your database.

## Prisma Commands

Once the prisma schema is written, you have to migrate the changes to your database and to generate the prisma client.

Use this command to launch the migrations :

```
npx prisma migrate dev
```

and right after generate the javascript client

```
npx prisma generate
```

**Dont forget to run this two commands if you apply changes to the schema**

If you want to visualize and manage your database you can run

```
npx prisma studio
```

## Create the prisma client file

To import and use the prisma client you have to create a file **client.ts** in the prisma folder.
In this file import PrismaClient and create a new instance of the PrismaClient Class like this :

```ts
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default prisma;
```

## Define the routes for your API !

When **Prisma** is properly set up, it's time to define the routes for your entities !

First we will create the src folder if it doesn't exist. Next inside the src folder, add an **api** folder.
Inside the src/api folder, create an index.ts file.
Express work with routes and sub routes, so now we have to import the Router method from express like below :

```js
// src/api/index.ts

import { Router } from "express";

const router = Router();

export default router;
```

This file will contain the beggining of all the routes of our API.

## Create a folder for your first ressource

Now we have to create a folder for the **book** ressource.
This folder will contain the routes of our **CRUD**.

The folder structure will look like this :

```
├── routes.ts
├── interface.ts
├── controller.ts
├── handlers
│   ├── getAll.ts
│   └── getOne.ts
│   └── update.ts
│   └── delete.ts
│   └── create.ts
```

## Create the interface file

Once you have the folder structure, let's define the interface file.

This file is a typescript interface definition which purpose is to restrict our handlers functions.
For the getAll handler you have to define the type of these params :

- Url params
- Query params
- Response body type
- Request body type

Check the code below :

```ts
import { RequestHandler } from  "express";

type BookBodyCreate {
	title: string;
	year: Date;
}

export  interface  BookHandlers {
 getAll:  RequestHandler<null, Book[] | ResponseError, null>;
 getOne: RequestHandler<{id: string}, Book | ResponseError, null>;
 create: RequestHandler<null, Book | ResponseError, BookBodyCreate>
}
```

The **ReqestHandler** type take several params. The first is the URL param, the second is the Response Body Type, the third is the Request Body Type and the fourth is the Request Query Type.
You can see that as the second param we define a Type like **Book** or **Book[]** and a **ResponseError**.
You have to define the ResponseError Type in a separate file and import it all the **interface.ts** files.

Tips :

```ts
type ResponseError = {
  message: string | unknown;
};
```

You will have to define a type for each method in the **handlers** folder.
Be careful with this file and pay attention to each types, you may encounter errors further if you do some mistakes here.

## Define the handlers

Now we can define our **handlers**.
For the getAll method we will create a function of type **BookHandlers["getAll"]** like below :

```ts
import { BookHandlers } from  "../interface";
import prisma from '../../../../prisma/client

const getAllBooks:BookHandlers["getAll"] = async (req, res) => {
  try{
    const books = await prisma.book.findMany();
    res.status(200).json(books);
  } catch (error) {
    console.log(error)
    res.status(500).json({message : error})
  }
};

export default getAllBooks
```

## Add the handlers to the controller

The **controller** file will contain a controller object with all our handlers as key like this :

```js
import getAll from "./handlers/getAll";
import getOne from "./handlers/getOne";
import create from "./handlers/create";
import update from "./handlers/update";
import delete_ from "./handlers/delete";

const controller = {
  getAll,
  getOne,
  create,
  update,
  delete: delete_,
};

export default controller;
```

## Create the routes

Now you can repeat the operation for each file in the handlers folder, don't forget to complete the **interface.ts** file before the method !

---

Let's take a look to the routes.ts file now.
As we did in the src/api/index.ts file we have to initialize a router like so :

```ts
import { Router } from  "express";

import controller from  "./controller";

const  router  =  Router();

router.get("/", controller.getAll);
router.get("/:id", controller.getOne);
...

export  default  router;
```

---

Once the router is ready with one route for each operation import it in the **src/api/index.ts**
file like below :

```ts
import { Router } from "express";

import books from "./books/routes";

const router = Router();

router.use("/books", books);

export default router;
```

**Almost done !!**

Now you will have to add the entry point of the API routes !

In the **app.ts** file add this like :

```ts
app.use("/api/v1", api);
```

The file will look like below :

```ts
import Express from "express";

import api from "./api";

const app = Express();

app.use(Express.json());

// this line !!
app.use("/api/v1", api);

export default app;
```

## Hurray ! You wrote your first CRUD !!

You can now test all the routes and operations with postman or with your favorite http client !!


In this Exercice we will build an MVC like API with Express and Prisma !

Exercice API with Prisma and Typescript !

Thanks to Theo here is a video to explain why NextJs is a backend framework

Next JS is a Backend framewotk

# Server authentication 

In this tutorials we will discover how to register our users into our server.

We will use these technologies:

- Express
- Prisma 
- Bcrypt
- Jsonwebtoken


## Summary

If you are here we assume that you allready know how to build a simple http server with Express and Prisma, if you don't please refer to this repository : 
[2209-BTZ-exercice-api-prisma-ts
](https://github.com/WildCodeSchool/2209-BTZ-exercice-api-prisma-ts)

- User registration in a secure way with Bcrypt
- Sign in into our server
- Identification & middlewares
- Test with a real client
 

### User registration in a secure way with Bcrypt

Fork this [repo](https://github.com/WildCodeSchool/2209-BTZ-exercice-api-prisma-ts) and checkout on a new branch.

```bash
git checkout -b user-authentication
``` 
We will now create a new end point in our API.
To do it, create a new folder inside the api folder and call it `auth`
Inside this folder we will need our controller, interface and handler folder as usual.

Take a look at the interface file : 

```js
// src/api/auth/interface.ts

import { ResponseError } from "./../../interfaces/globalTypes";
import { User } from "@prisma/client";
import { RequestHandler } from "express";

type TUserWithoutPassword = Omit<User, "password">;
type TUserRegisterBody = Pick<User, "email" | "name" | "password">;

type TLoginBody = {
  email: string;
  password: string;
};

interface IAuthController {
  signUp: RequestHandler<
    null,
    TUserWithoutPassword | ResponseError,
    TUserRegisterBody,
    null
  >;
}

export default IAuthController;
```

*REMEMBER: This file is only for typescript it doesn't execute any script, it is only the representation of our controller*

You can see that our signUp method will take an object with user informations and return the entire user object **WITHOUT HIS PASSWORD**.

Next in the handlers folder create a SignUp method where we will implement the register logic.

To register a user, we will take his credentials, hash the password with bcrypt and save all the informations in the database.

So in the handler you will get the email and password of the new user from the request body:

```js
const signUp: IAuthController["signUp"] = async (req, res) => {
  const { email, name, password } = req.body;
};

```
Next we will hash the password with bcrypt: 
```js
    const hashedPassword = bcrypt.hashSync(password, 10);
```
This function tke the password as first argument and the "salt" number as second.
The hashsync method return the "hashed" version of the user password.

Next step is to save the new user in our database: 

```js
 const newUser = await prisma.user.create({
      data: {
        email,
        name,
        password: hashedPassword,
      },
    });
```
*Don't save the clean version of the user in the database, allways store a hash. If an attacker get all your database he will not be able to see the user passwords*

One the user is properly saved in the database, we now have to generate a token with JWT and to send it to the user in the Authorization *header.*

*REMEMBER: A header is a piece of informations in http requests/response.*

To generate a token, we use the [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) package.

To sign your token you have to store a secret key in your backend.
To use environment variables be sure to use [dotenv](https://www.npmjs.com/package/dotenv) package in your application like below : 

```js
// src/app.ts
import express from "express";
import api from "./api";
import cors from "cors";
import dotenv from "dotenv";

// Use the package like this !
dotenv.config();

const app = express();

app.use(express.json());

app.use(
  cors({
    origin: "*",
    credentials: true,
    allowedHeaders: ["Authorization", "content-type"],
  })
);

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.use("/api/v1", api);

export default app;

```

Now go in the .env ( or create it at the root of your project ) and add a new environment variable like this : 

```env
JWT_SECRET=YOUR_SECRET_KEY
```
Replace "YOUR_SECRET_KEY" with a strong secret like : "iufbqliurgbqliurghiurinfqzeiufnqufbg"
Avoid using simple secrets like "secret" in order to prevent brute force attacks.

Now we can sign the token with jsonwebtoken !!
We will use the `sign` method from jsonwebtoken to create our token.
Sign is an async method who take 3 arguments, the first one is the token payload, the second one is the secret key from your `.env` file and the third an object containing all the option to pass to our token ( expiration, algorithm ... ).

At the top on your file, import the environment variable like this: 

```js
const secret = process.env.JWT_SECRET || "development_secret_key";
```

You can now pass it to the `sign` method.

Before signing our token we need to remove the password from the object returned by prisma ( Never send the user password in the response !! )

You can remove it like this : 

```js
const { password: removedPassword, ...userWithoutPassword } = newUser;
```

And then, sign the token ! 

```js
const token = jwt.sign(userWithoutPassword, secret, {
    expiresIn: "10m",
});
```

We can now set this token in the `Authorization` header and send the created user with the header in the http reponse.

```js
 res.setHeader("Authorization", `Bearer ${token}`);

 res.status(200).json(userWithoutPassword);

```


At the end, the signUp method should look like below:
```js
import prisma from "../../../../prisma/client";
import IAuthController from "../interface";
import bcrypt from "bcryptjs";
import { getJWTSecret } from "../../../utils/auth";
import jwt from "jsonwebtoken";

const signUp: IAuthController["signUp"] = async (req, res) => {
  const { email, name, password } = req.body;
  try {
    const hashedPassword = bcrypt.hashSync(password, 10);

    const newUser = await prisma.user.create({
      data: {
        email,
        name,
        password: hashedPassword,
      },
    });

    const secret = getJWTSecret();

    const { password: removedPassword, ...userWithoutPassword } = newUser;

    const token = jwt.sign(userWithoutPassword, secret, {
      expiresIn: "10m",
      
    });

    res.setHeader("Authorization", `Bearer ${token}`);

    res.status(200).json(userWithoutPassword);
  } catch (error) {
    console.log(error);
    res.status(500).json({ message: error });
  }
};

export default signUp;
```

Once the user is properly registered we have to create the route for the auth ressource in our application.

```js
// src/api/auth/routes.ts
import { Router } from "express";
import controller from "./controller";

const router = Router();

router.post("/signup", controller.signUp);

export default router;

```

```js
// src/api/index
import { Router } from "express";
import books from "./book/routes";
import collections from "./collection/routes";
import auth from "./auth/routes";
import checkToken from "../middlewares/checkToken";

const router = Router();

router.use("/auth", auth);
router.use("/books", books);
router.use("/collections", collections);

export default router;
```

You can now try to do a POST on http://localhost:4000/api/v1/auth/signup with an email and a password in the body and check if the API respond to you with the new user and the token in the headers !


# Sign in into our server

Now you know how to register a new user and you probably want a signin method to authenticate your users from clients into your server.

Don't worry, there is no big deal !

First check your interface file in the auth folder, inside this file we will add a new method to the AuthController in order to type the signIn method.

```js
// src/api/auth/interface.ts

import { ResponseError } from "./../../interfaces/globalTypes";
import { User } from "@prisma/client";
import { RequestHandler } from "express";

type TUserWithoutPassword = Omit<User, "password">;
type TUserRegisterBody = Pick<User, "email" | "name" | "password">;
type TLoginBody = Pick<User, "email" | "password">

interface IAuthController {
  signUp: RequestHandler<
    null,
    TUserWithoutPassword | ResponseError,
    TUserRegisterBody,
    null
  >;

// add the lines below to the AuthController interface
  signIn: RequestHandler<
    null,
    TUserWithoutPassword | ResponseError,
    TLoginBody,
    null
  >;
}

export default IAuthController;
```
To authenticate our users we need an email and the password from the request body sent by the client and we have to compare these values with the values stored in our database.

So now we will create a handler for the signIn method.

```js
import { sign } from "jsonwebtoken";
import AuthHandlers from "../interfaces";
import prisma from "../../../../prisma/client";
import bcrypt from "bcryptjs";

const login: AuthHandlers["login"] = async (req, res, next) => {
  const { email, password } = req.body;

  try {
    // Here we retrive the user from our database, if no user exist with this email in our database we throw an error.
    const user = await prisma.user.findUniqueOrThrow({
      where: {
        email: email,
      },
    });

    // Now we have to check if the password in the request body match with the hash stored in our database, if not we throw an error "invalid password" and sent it to the client.
    if (!bcrypt.compareSync(password, user.password)) {
      throw new Error("Invalid password");
    }
    
    // As usual we remove the hash of the password from the user object in order to send it to the client
    const { password: _, ...userWithoutPassword } = user;
    
    // Here we sign a new token with the jsonwebtoken package 
    const token = sign(
      { ...userWithoutPassword },
      process.env.SECRET as string
    );
    
    // And now we store the generated token in the Authorization header
    res.setHeader("Authorization", `Bearer ${token}`);

    // At the end we return a status 200 with the user in the response body.
    return res.status(200).json({
      ...userWithoutPassword,
    });
  } catch (error) {
    console.log(error);
    next(error);
  }
};

export default login;

```

And that's it ! Don't forget to add this handler to your controller and to create the proper route !!

```js
// src/api/auth/controller.ts

const controller : AuthController = {
 signIn,
 signUp
};
```

```js
// src/api/auth/routes.ts

router.post("/signin", controller.signIn);
router.post("/signup", controller.singUp);

```


If you wan't to know how to authenticate your users on the client side with React/NextJS feel free to check this tutorial : [NextJS Authentication](https://tutorials.jidayyy.com/tutorial/nextjs-authentication/edit)



On this tutorial we will learn how to build an simple authentication with Bcrypt and Jwt for an Express API

Jidayyy'sTutorials

Jidayyy's
Tutorials