├── client
├── src
│ ├── index.css
│ ├── components
│ │ ├── PrivateRoute.jsx
│ │ ├── Header.jsx
│ │ └── OAuth.jsx
│ ├── main.jsx
│ ├── firebase.js
│ ├── redux
│ │ ├── store.js
│ │ └── user
│ │ │ └── userSlice.js
│ ├── App.jsx
│ └── pages
│ │ ├── About.jsx
│ │ ├── Home.jsx
│ │ ├── SignIn.jsx
│ │ ├── SignUp.jsx
│ │ └── Profile.jsx
├── postcss.config.js
├── tailwind.config.js
├── index.html
├── vite.config.js
├── README.md
├── .eslintrc.cjs
└── package.json
├── api
├── utils
│ ├── error.js
│ └── verifyUser.js
├── routes
│ ├── auth.route.js
│ └── user.route.js
├── models
│ └── user.model.js
├── index.js
└── controllers
│ ├── user.controller.js
│ └── auth.controller.js
├── .gitignore
└── package.json
/client/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/client/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/api/utils/error.js:
--------------------------------------------------------------------------------
1 | export const errorHandler = (statusCode, message) => {
2 | const error = new Error();
3 | error.statusCode = statusCode;
4 | error.message = message;
5 | return error;
6 | };
7 |
--------------------------------------------------------------------------------
/client/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
--------------------------------------------------------------------------------
/client/src/components/PrivateRoute.jsx:
--------------------------------------------------------------------------------
1 | import {useSelector} from 'react-redux'
2 | import { Outlet, Navigate } from 'react-router-dom'
3 |
4 | export default function PrivateRoute() {
5 | const {currentUser} = useSelector(state => state.user)
6 | return currentUser ? Auth App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/api/routes/auth.route.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import { signin, signup, google, signout } from '../controllers/auth.controller.js';
3 |
4 | const router = express.Router();
5 |
6 | router.post('/signup', signup);
7 | router.post('/signin', signin);
8 | router.post('/google', google);
9 | router.get('/signout', signout);
10 |
11 | export default router;
12 |
--------------------------------------------------------------------------------
/client/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react-swc';
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | server: {
7 | proxy: {
8 | '/api': {
9 | target: 'http://localhost:3000',
10 | secure: false,
11 | },
12 | },
13 | },
14 | plugins: [react()],
15 | });
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .env
26 |
--------------------------------------------------------------------------------
/api/routes/user.route.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import {
3 | test,
4 | updateUser,
5 | deleteUser,
6 | } from '../controllers/user.controller.js';
7 | import { verifyToken } from '../utils/verifyUser.js';
8 |
9 | const router = express.Router();
10 |
11 | router.get('/', test);
12 | router.post('/update/:id', verifyToken, updateUser);
13 | router.delete('/delete/:id', verifyToken, deleteUser);
14 |
15 | export default router;
16 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/api/utils/verifyUser.js:
--------------------------------------------------------------------------------
1 | import jwt from 'jsonwebtoken';
2 | import { errorHandler } from './error.js';
3 |
4 | export const verifyToken = (req, res, next) => {
5 | const token = req.cookies.access_token;
6 |
7 | if (!token) return next(errorHandler(401, 'You are not authenticated!'));
8 |
9 | jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
10 | if (err) return next(errorHandler(403, 'Token is not valid!'));
11 |
12 | req.user = user;
13 | next();
14 | });
15 |
16 |
17 | }
--------------------------------------------------------------------------------
/client/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App.jsx';
4 | import './index.css';
5 | import { persistor, store } from './redux/store.js';
6 | import { Provider } from 'react-redux';
7 | import { PersistGate } from 'redux-persist/integration/react';
8 |
9 | ReactDOM.createRoot(document.getElementById('root')).render(
10 |
11 |
12 |
14 |
15 | );
16 |
--------------------------------------------------------------------------------
/client/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mern-auth",
3 | "version": "1.0.0",
4 | "description": "",
5 | "type": "module",
6 | "main": "index.js",
7 | "scripts": {
8 | "dev": "nodemon api/index.js",
9 | "start": "node api/index.js",
10 | "build": "npm install && npm install --prefix client && npm run build --prefix client"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "dependencies": {
16 | "bcryptjs": "^2.4.3",
17 | "cookie-parser": "^1.4.6",
18 | "dotenv": "^16.3.1",
19 | "express": "^4.18.2",
20 | "jsonwebtoken": "^9.0.1",
21 | "mongoose": "^7.4.2",
22 | "nodemon": "^3.0.1"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/client/src/firebase.js:
--------------------------------------------------------------------------------
1 | // Import the functions you need from the SDKs you need
2 | import { initializeApp } from 'firebase/app';
3 | // TODO: Add SDKs for Firebase products that you want to use
4 | // https://firebase.google.com/docs/web/setup#available-libraries
5 |
6 | // Your web app's Firebase configuration
7 | const firebaseConfig = {
8 | apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
9 | authDomain: 'mern-auth-1c4ae.firebaseapp.com',
10 | projectId: 'mern-auth-1c4ae',
11 | storageBucket: 'mern-auth-1c4ae.appspot.com',
12 | messagingSenderId: '277641423672',
13 | appId: '1:277641423672:web:2de25252aae022d51aafcd',
14 | };
15 |
16 | // Initialize Firebase
17 | export const app = initializeApp(firebaseConfig);
18 |
--------------------------------------------------------------------------------
/api/models/user.model.js:
--------------------------------------------------------------------------------
1 | import mongoose from 'mongoose';
2 |
3 | const userSchema = new mongoose.Schema(
4 | {
5 | username: {
6 | type: String,
7 | required: true,
8 | unique: true,
9 | },
10 | email: {
11 | type: String,
12 | required: true,
13 | unique: true,
14 | },
15 | password: {
16 | type: String,
17 | required: true,
18 | },
19 | profilePicture: {
20 | type: String,
21 | default:
22 | 'https://img.freepik.com/premium-vector/man-avatar-profile-picture-vector-illustration_268834-538.jpg',
23 | },
24 | },
25 | { timestamps: true }
26 | );
27 |
28 | const User = mongoose.model('User', userSchema);
29 |
30 | export default User;
31 |
--------------------------------------------------------------------------------
/client/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { combineReducers, configureStore } from '@reduxjs/toolkit';
2 | import userReducer from './user/userSlice.js';
3 | import { persistReducer, persistStore } from 'redux-persist';
4 | import storage from 'redux-persist/lib/storage';
5 |
6 | const rootReducer = combineReducers({ user: userReducer });
7 |
8 | const persistConfig = {
9 | key: 'root',
10 | version: 1,
11 | storage,
12 | };
13 |
14 | const persistedReducer = persistReducer(persistConfig, rootReducer);
15 |
16 | export const store = configureStore({
17 | reducer: persistedReducer,
18 | middleware: (getDefaultMiddleware) =>
19 | getDefaultMiddleware({
20 | serializableCheck: false,
21 | }),
22 | });
23 |
24 | export const persistor = persistStore(store);
25 |
--------------------------------------------------------------------------------
/client/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { BrowserRouter, Routes, Route } from 'react-router-dom';
2 | import Home from './pages/Home';
3 | import About from './pages/About';
4 | import SignIn from './pages/SignIn';
5 | import SignUp from './pages/SignUp';
6 | import Profile from './pages/Profile';
7 | import Header from './components/Header';
8 | import PrivateRoute from './components/PrivateRoute';
9 |
10 | export default function App() {
11 | return (
12 |
13 | {/* header */}
14 |
15 |
16 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/client/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import { useSelector } from 'react-redux';
3 |
4 | export default function Header() {
5 | const { currentUser } = useSelector((state) => state.user);
6 | return (
7 |
8 |
9 |
10 |
Auth App
11 |
12 |
13 | Home
15 |
16 | About
18 |
19 | Sign In
24 | )}
25 |
26 |
27 |
28 |
6 |
About
7 |
8 | This is a MERN (MongoDB, Express, React, Node.js) stack application with
9 | authentication. It allows users to sign up, log in, and log out, and
10 | provides access to protected routes only for authenticated users.
11 |
12 |
13 | The front-end of the application is built with React and uses React
14 | Router for client-side routing. The back-end is built with Node.js and
15 | Express, and uses MongoDB as the database. Authentication is implemented
16 | using JSON Web Tokens (JWT).
17 |
18 |
19 | This application is intended as a starting point for building full-stack
20 | web applications with authentication using the MERN stack. Feel free to
21 | use it as a template for your own projects!
22 |
23 |
6 |
7 | Welcome to my Auth App!
8 |
9 |
10 | This is a full-stack web application built with the MERN (MongoDB,
11 | Express, React, Node.js) stack. It includes authentication features that
12 | allow users to sign up, log in, and log out, and provides access to
13 | protected routes only for authenticated users.
14 |
15 |
16 | The front-end of the application is built with React and uses React
17 | Router for client-side routing. The back-end is built with Node.js and
18 | Express, and uses MongoDB as the database. Authentication is implemented
19 | using JSON Web Tokens (JWT).
20 |
21 |
22 | This application is intended as a starting point for building full-stack
23 | web applications with authentication using the MERN stack. Feel free to
24 | use it as a template for your own projects!
25 |
26 |
41 | Continue with google
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/api/controllers/user.controller.js:
--------------------------------------------------------------------------------
1 | import User from '../models/user.model.js';
2 | import { errorHandler } from '../utils/error.js';
3 | import bcryptjs from 'bcryptjs';
4 |
5 | export const test = (req, res) => {
6 | res.json({
7 | message: 'API is working!',
8 | });
9 | };
10 |
11 | // update user
12 |
13 | export const updateUser = async (req, res, next) => {
14 | if (req.user.id !== req.params.id) {
15 | return next(errorHandler(401, 'You can update only your account!'));
16 | }
17 | try {
18 | if (req.body.password) {
19 | req.body.password = bcryptjs.hashSync(req.body.password, 10);
20 | }
21 |
22 | const updatedUser = await User.findByIdAndUpdate(
23 | req.params.id,
24 | {
25 | $set: {
26 | username: req.body.username,
27 | email: req.body.email,
28 | password: req.body.password,
29 | profilePicture: req.body.profilePicture,
30 | },
31 | },
32 | { new: true }
33 | );
34 | const { password, ...rest } = updatedUser._doc;
35 | res.status(200).json(rest);
36 | } catch (error) {
37 | next(error);
38 | }
39 | };
40 |
41 |
42 | // delete user
43 |
44 |
45 | export const deleteUser = async (req, res, next) => {
46 | if (req.user.id !== req.params.id) {
47 | return next(errorHandler(401, 'You can delete only your account!'));
48 | }
49 | try {
50 | await User.findByIdAndDelete(req.params.id);
51 | res.status(200).json('User has been deleted...');
52 | } catch (error) {
53 | next(error);
54 | }
55 |
56 | }
--------------------------------------------------------------------------------
/client/src/redux/user/userSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 |
3 | const initialState = {
4 | currentUser: null,
5 | loading: false,
6 | error: false,
7 | };
8 |
9 | const userSlice = createSlice({
10 | name: 'user',
11 | initialState,
12 | reducers: {
13 | signInStart: (state) => {
14 | state.loading = true;
15 | },
16 | signInSuccess: (state, action) => {
17 | state.currentUser = action.payload;
18 | state.loading = false;
19 | state.error = false;
20 | },
21 | signInFailure: (state, action) => {
22 | state.loading = false;
23 | state.error = action.payload;
24 | },
25 | updateUserStart: (state) => {
26 | state.loading = true;
27 | },
28 | updateUserSuccess: (state, action) => {
29 | state.currentUser = action.payload;
30 | state.loading = false;
31 | state.error = false;
32 | },
33 | updateUserFailure: (state, action) => {
34 | state.loading = false;
35 | state.error = action.payload;
36 | },
37 | deleteUserStart: (state) => {
38 | state.loading = true;
39 | },
40 | deleteUserSuccess: (state) => {
41 | state.currentUser = null;
42 | state.loading = false;
43 | state.error = false;
44 | },
45 | deleteUserFailure: (state, action) => {
46 | state.loading = false;
47 | state.error = action.payload;
48 | },
49 | signOut: (state) => {
50 | state.currentUser = null;
51 | state.loading = false;
52 | state.error = false;
53 | },
54 | },
55 | });
56 |
57 | export const {
58 | signInStart,
59 | signInSuccess,
60 | signInFailure,
61 | updateUserFailure,
62 | updateUserStart,
63 | updateUserSuccess,
64 | deleteUserFailure,
65 | deleteUserStart,
66 | deleteUserSuccess,
67 | signOut,
68 | } = userSlice.actions;
69 |
70 | export default userSlice.reducer;
71 |
--------------------------------------------------------------------------------
/client/src/pages/SignIn.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Link, useNavigate } from 'react-router-dom';
3 | import {
4 | signInStart,
5 | signInSuccess,
6 | signInFailure,
7 | } from '../redux/user/userSlice';
8 | import { useDispatch, useSelector } from 'react-redux';
9 | import OAuth from '../components/OAuth';
10 |
11 | export default function SignIn() {
12 | const [formData, setFormData] = useState({});
13 | const { loading, error } = useSelector((state) => state.user);
14 |
15 | const navigate = useNavigate();
16 | const dispatch = useDispatch();
17 | const handleChange = (e) => {
18 | setFormData({ ...formData, [e.target.id]: e.target.value });
19 | };
20 |
21 | const handleSubmit = async (e) => {
22 | e.preventDefault();
23 | try {
24 | dispatch(signInStart());
25 | const res = await fetch('/api/auth/signin', {
26 | method: 'POST',
27 | headers: {
28 | 'Content-Type': 'application/json',
29 | },
30 | body: JSON.stringify(formData),
31 | });
32 | const data = await res.json();
33 | if (data.success === false) {
34 | dispatch(signInFailure(data));
35 | return;
36 | }
37 | dispatch(signInSuccess(data));
38 | navigate('/');
39 | } catch (error) {
40 | dispatch(signInFailure(error));
41 | }
42 | };
43 | return (
44 |
45 |
Sign In
46 |
69 |
70 |
Dont Have an account?
71 |
72 |
Sign up
73 |
74 |
75 |
76 | {error ? error.message || 'Something went wrong!' : ''}
77 |
78 |
41 |
Sign Up
42 |
72 |
73 |
Have an account?
74 |
75 |
Sign in
76 |
77 |
78 |
{error && 'Something went wrong!'}
79 |
112 |
Profile
113 |
173 |
174 |
178 | Delete Account
179 |
180 |
181 | Sign out
182 |
183 |
184 |
{error && 'Something went wrong!'}
185 |
186 | {updateSuccess && 'User is updated successfully!'}
187 |
188 |