├── .gitignore
├── backend
├── api
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ ├── admin.py
│ ├── apps.py
│ ├── urls.py
│ ├── serializer.py
│ └── views.py
├── backend
│ ├── __init__.py
│ ├── urls.py
│ ├── asgi.py
│ ├── wsgi.py
│ └── settings.py
├── requirements.txt
├── manage.py
└── .gitignore
├── frontend
├── src
│ ├── utils
│ │ ├── constants.js
│ │ ├── axios.js
│ │ ├── useAxios.js
│ │ └── auth.js
│ ├── main.jsx
│ ├── views
│ │ ├── logout.jsx
│ │ ├── home.jsx
│ │ ├── private.jsx
│ │ ├── login.jsx
│ │ └── register.jsx
│ ├── layouts
│ │ ├── PrivateRoute.jsx
│ │ └── MainWrapper.jsx
│ ├── store
│ │ └── auth.js
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── assets
│ │ └── react.svg
├── .prettierrc.json
├── vite.config.js
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── .editorconfig
├── package.json
├── public
│ └── vite.svg
└── yarn.lock
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
--------------------------------------------------------------------------------
/backend/api/__init__.py:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/backend/backend/__init__.py:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/backend/api/migrations/__init__.py:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/backend/api/models.py:
--------------------------------------------------------------------------------
1 | from django.db import models
2 |
3 | # Create your models here.
4 |
--------------------------------------------------------------------------------
/backend/api/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 |
3 | # Create your tests here.
4 |
--------------------------------------------------------------------------------
/frontend/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | export const API_BASE_URL = 'http://localhost:8000/api/';
2 |
--------------------------------------------------------------------------------
/backend/api/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 |
3 | # Register your models here.
4 |
--------------------------------------------------------------------------------
/frontend/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "tabWidth": 4,
4 | "semi": true,
5 | "singleQuote": true
6 | }
7 |
--------------------------------------------------------------------------------
/backend/api/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 |
3 |
4 | class ApiConfig(AppConfig):
5 | default_auto_field = 'django.db.models.BigAutoField'
6 | name = 'api'
7 |
--------------------------------------------------------------------------------
/frontend/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/backend/backend/urls.py:
--------------------------------------------------------------------------------
1 | # backend/urls.py
2 |
3 | from django.contrib import admin
4 | from django.urls import path
5 | from django.urls import path, include
6 |
7 | urlpatterns = [
8 | path('admin/', admin.site.urls),
9 | path('api/', include("api.urls"))
10 | ]
11 |
--------------------------------------------------------------------------------
/frontend/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 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/backend/requirements.txt:
--------------------------------------------------------------------------------
1 | asgiref==3.6.0
2 | autopep8==2.0.2
3 | Django==4.2
4 | django-cors-headers==3.14.0
5 | djangorestframework==3.14.0
6 | djangorestframework-simplejwt==5.2.2
7 | pycodestyle==2.10.0
8 | PyJWT==2.6.0
9 | pytz==2023.3
10 | sqlparse==0.4.3
11 | toml==0.10.2
12 | tomli==2.0.1
13 | tzdata==2023.3
14 |
--------------------------------------------------------------------------------
/frontend/src/views/logout.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { LoggedOutView } from './home';
3 | import { logout } from '../utils/auth';
4 |
5 | const Logout = () => {
6 | useEffect(() => {
7 | logout();
8 | }, []);
9 | return ;
10 | };
11 |
12 | export default Logout;
13 |
--------------------------------------------------------------------------------
/frontend/src/utils/axios.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | const apiInstance = axios.create({
4 | baseURL: 'http://localhost:8000/api/',
5 | timeout: 5000, // timeout after 5 seconds
6 | headers: {
7 | 'Content-Type': 'application/json',
8 | Accept: 'application/json',
9 | },
10 | });
11 |
12 | export default apiInstance;
13 |
--------------------------------------------------------------------------------
/frontend/src/layouts/PrivateRoute.jsx:
--------------------------------------------------------------------------------
1 | import { Navigate } from 'react-router-dom';
2 | import { useAuthStore } from '../store/auth';
3 |
4 | const PrivateRoute = ({ children }) => {
5 | const loggedIn = useAuthStore((state) => state.isLoggedIn)();
6 | return loggedIn ? <>{children} : ;
7 | };
8 |
9 | export default PrivateRoute;
10 |
--------------------------------------------------------------------------------
/frontend/.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 |
--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/backend/backend/asgi.py:
--------------------------------------------------------------------------------
1 | """
2 | ASGI config for backend project.
3 |
4 | It exposes the ASGI callable as a module-level variable named ``application``.
5 |
6 | For more information on this file, see
7 | https://docs.djangoproject.com/en/4.0/howto/deployment/asgi/
8 | """
9 |
10 | import os
11 |
12 | from django.core.asgi import get_asgi_application
13 |
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'backend.settings')
15 |
16 | application = get_asgi_application()
17 |
--------------------------------------------------------------------------------
/backend/backend/wsgi.py:
--------------------------------------------------------------------------------
1 | """
2 | WSGI config for backend project.
3 |
4 | It exposes the WSGI callable as a module-level variable named ``application``.
5 |
6 | For more information on this file, see
7 | https://docs.djangoproject.com/en/4.0/howto/deployment/wsgi/
8 | """
9 |
10 | import os
11 |
12 | from django.core.wsgi import get_wsgi_application
13 |
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'backend.settings')
15 |
16 | application = get_wsgi_application()
17 |
--------------------------------------------------------------------------------
/backend/api/urls.py:
--------------------------------------------------------------------------------
1 | from django.urls import path
2 | from . import views
3 |
4 | from rest_framework_simplejwt.views import (
5 | TokenRefreshView,
6 | )
7 |
8 | urlpatterns = [
9 | path('token/', views.MyTokenObtainPairView.as_view(), name='token_obtain_pair'),
10 | path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
11 | path('register/', views.RegisterView.as_view(), name='auth_register'),
12 | path('test/', views.testEndPoint, name='test'),
13 | path('', views.getRoutes)
14 | ]
15 |
--------------------------------------------------------------------------------
/frontend/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: { browser: true, es2020: true },
3 | extends: [
4 | "eslint:recommended",
5 | "plugin:react/recommended",
6 | "plugin:react/jsx-runtime",
7 | "plugin:react-hooks/recommended",
8 | ],
9 | parserOptions: { ecmaVersion: "latest", sourceType: "module" },
10 | settings: { react: { version: "18.2" } },
11 | plugins: ["react-refresh"],
12 | rules: {
13 | "react-refresh/only-export-components": "warn",
14 | "react/prop-types": "off",
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/frontend/src/layouts/MainWrapper.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { setUser } from '../utils/auth';
3 |
4 | const MainWrapper = ({ children }) => {
5 | const [loading, setLoading] = useState(true);
6 | useEffect(() => {
7 | const handler = async () => {
8 | setLoading(true);
9 | await setUser();
10 | setLoading(false);
11 | };
12 | handler();
13 | }, []);
14 |
15 | return <>{loading ? null : children};
16 | };
17 |
18 | export default MainWrapper;
19 |
--------------------------------------------------------------------------------
/frontend/src/store/auth.js:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 | import { mountStoreDevtool } from 'simple-zustand-devtools';
3 |
4 | const useAuthStore = create((set, get) => ({
5 | allUserData: null, // Use this to store all user data
6 | loading: false,
7 | user: () => ({
8 | user_id: get().allUserData?.user_id || null,
9 | username: get().allUserData?.username || null,
10 | }),
11 | setUser: (user) => set({ allUserData: user }),
12 | setLoading: (loading) => set({ loading }),
13 | isLoggedIn: () => get().allUserData !== null,
14 | }));
15 |
16 | if (import.meta.env.DEV) {
17 | mountStoreDevtool('Store', useAuthStore);
18 | }
19 |
20 | export { useAuthStore };
21 |
--------------------------------------------------------------------------------
/backend/manage.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | """Django's command-line utility for administrative tasks."""
3 | import os
4 | import sys
5 |
6 |
7 | def main():
8 | """Run administrative tasks."""
9 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'backend.settings')
10 | try:
11 | from django.core.management import execute_from_command_line
12 | except ImportError as exc:
13 | raise ImportError(
14 | "Couldn't import Django. Are you sure it's installed and "
15 | "available on your PYTHONPATH environment variable? Did you "
16 | "forget to activate a virtual environment?"
17 | ) from exc
18 | execute_from_command_line(sys.argv)
19 |
20 |
21 | if __name__ == '__main__':
22 | main()
23 |
--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/frontend/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: https://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | # Unix-style newlines with a newline ending every file
7 | [*]
8 | end_of_line = lf
9 | insert_final_newline = true
10 |
11 | # Matches multiple files with brace expansion notation
12 | # Set default charset
13 | [*.{js,py}]
14 | charset = utf-8
15 | indent_size = 4
16 |
17 | # 4 space indentation
18 | [*.py]
19 | indent_style = space
20 | indent_size = 4
21 |
22 | # Tab indentation (no size specified)
23 | [Makefile]
24 | indent_style = tab
25 |
26 | # Indentation override for all JS under lib directory
27 | [lib/**.js]
28 | indent_style = space
29 | indent_size = 2
30 |
31 | # Matches the exact files either package.json or .travis.yml
32 | [{package.json,.travis.yml}]
33 | indent_style = space
34 | indent_size = 2
--------------------------------------------------------------------------------
/frontend/src/utils/useAxios.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { getRefreshToken, isAccessTokenExpired, setAuthUser } from './auth';
3 | import { API_BASE_URL } from './constants';
4 | import Cookies from 'js-cookie';
5 |
6 | const useAxios = () => {
7 | const accessToken = Cookies.get('access_token');
8 | const refreshToken = Cookies.get('refresh_token');
9 |
10 | const axiosInstance = axios.create({
11 | baseURL: API_BASE_URL,
12 | headers: { Authorization: `Bearer ${accessToken}` },
13 | });
14 |
15 | axiosInstance.interceptors.request.use(async (req) => {
16 | if (!isAccessTokenExpired(accessToken)) return req;
17 |
18 | const response = await getRefreshToken(refreshToken);
19 |
20 | setAuthUser(response.access, response.refresh);
21 |
22 | req.headers.Authorization = `Bearer ${response.data.access}`;
23 | return req;
24 | });
25 |
26 | return axiosInstance;
27 | };
28 |
29 | export default useAxios;
30 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fast-frontend",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "axios": "^1.4.0",
14 | "dayjs": "^1.11.7",
15 | "js-cookie": "^3.0.5",
16 | "jwt-decode": "^3.1.2",
17 | "react": "^18.2.0",
18 | "react-dom": "^18.2.0",
19 | "react-router-dom": "6.10.0",
20 | "zustand": "^4.3.8"
21 | },
22 | "devDependencies": {
23 | "@types/react": "^18.0.28",
24 | "@types/react-dom": "^18.0.11",
25 | "@vitejs/plugin-react": "^4.0.0",
26 | "eslint": "^8.38.0",
27 | "eslint-plugin-react": "^7.32.2",
28 | "eslint-plugin-react-hooks": "^4.6.0",
29 | "eslint-plugin-react-refresh": "^0.3.4",
30 | "prettier": "^2.8.8",
31 | "simple-zustand-devtools": "^1.1.0",
32 | "vite": "^4.3.2"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/frontend/src/views/home.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import { useAuthStore } from '../store/auth';
3 |
4 | const Home = () => {
5 | const [isLoggedIn, user] = useAuthStore((state) => [
6 | state.isLoggedIn,
7 | state.user,
8 | ]);
9 | return (
10 |
11 | {isLoggedIn() ? : }
12 |
13 | );
14 | };
15 |
16 | const LoggedInView = ({ user }) => {
17 | return (
18 |
19 |
Welcome {user.username}
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 | };
29 |
30 | export const LoggedOutView = ({ title = 'Home' }) => {
31 | return (
32 |
33 |
{title}
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | );
42 | };
43 |
44 | export default Home;
45 |
--------------------------------------------------------------------------------
/frontend/src/App.jsx:
--------------------------------------------------------------------------------
1 | import './App.css';
2 | import { Route, Routes, BrowserRouter } from 'react-router-dom';
3 | import Home from './views/home';
4 | import MainWrapper from './layouts/MainWrapper';
5 | import Login from './views/login';
6 | import PrivateRoute from './layouts/PrivateRoute';
7 | import Logout from './views/logout';
8 | import Private from './views/private';
9 | import Register from './views/register';
10 |
11 | function App() {
12 | return (
13 |
14 |
15 |
16 |
20 |
21 |
22 | }
23 | />
24 | } />
25 | } />
26 | } />
27 | } />
28 |
29 |
30 |
31 | );
32 | }
33 |
34 | export default App;
35 |
--------------------------------------------------------------------------------
/frontend/src/views/private.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import useAxios from '../utils/useAxios';
3 |
4 | const Private = () => {
5 | const [res, setRes] = useState('');
6 | const [posRes, setPostRes] = useState('');
7 | const api = useAxios();
8 | useEffect(() => {
9 | const fetchData = async () => {
10 | try {
11 | const response = await api.get('/test/');
12 | setRes(response.data.response);
13 | } catch (error) {
14 | setPostRes(error.response.data);
15 | }
16 | };
17 | fetchData();
18 | }, []);
19 | const handleSubmit = async (e) => {
20 | e.preventDefault();
21 | try {
22 | const response = await api.post('/test/', {
23 | text: e.target[0].value,
24 | });
25 | setPostRes(response.data.response);
26 | } catch (error) {
27 | setPostRes(error.response.data);
28 | }
29 | };
30 | return (
31 |
32 | Private
33 | {res}
34 |
38 | {posRes && {posRes}
}
39 |
40 | );
41 | };
42 |
43 | export default Private;
44 |
--------------------------------------------------------------------------------
/frontend/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | a {
18 | font-weight: 500;
19 | color: #646cff;
20 | text-decoration: inherit;
21 | }
22 | a:hover {
23 | color: #535bf2;
24 | }
25 |
26 | body {
27 | margin: 0;
28 | display: flex;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | button {
40 | border-radius: 8px;
41 | border: 1px solid transparent;
42 | padding: 0.6em 1.2em;
43 | font-size: 1em;
44 | font-weight: 500;
45 | font-family: inherit;
46 | background-color: #1a1a1a;
47 | cursor: pointer;
48 | transition: border-color 0.25s;
49 | }
50 | button:hover {
51 | border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 | outline: 4px auto -webkit-focus-ring-color;
56 | }
57 |
58 | @media (prefers-color-scheme: light) {
59 | :root {
60 | color: #213547;
61 | background-color: #ffffff;
62 | }
63 | a:hover {
64 | color: #747bff;
65 | }
66 | button {
67 | background-color: #f9f9f9;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/backend/api/serializer.py:
--------------------------------------------------------------------------------
1 | from django.contrib.auth.models import User
2 | from django.contrib.auth.password_validation import validate_password
3 | from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
4 | from rest_framework import serializers
5 | from rest_framework.validators import UniqueValidator
6 | from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
7 |
8 |
9 | class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
10 | @classmethod
11 | def get_token(cls, user):
12 | token = super().get_token(user)
13 |
14 | # Add custom claims
15 | token['username'] = user.username
16 | token['email'] = user.email
17 | # ...
18 |
19 | return token
20 |
21 |
22 | class RegisterSerializer(serializers.ModelSerializer):
23 | password = serializers.CharField(
24 | write_only=True, required=True, validators=[validate_password])
25 | password2 = serializers.CharField(write_only=True, required=True)
26 |
27 | class Meta:
28 | model = User
29 | fields = ('username', 'password', 'password2')
30 |
31 | def validate(self, attrs):
32 | if attrs['password'] != attrs['password2']:
33 | raise serializers.ValidationError(
34 | {"password": "Password fields didn't match."})
35 |
36 | return attrs
37 |
38 | def create(self, validated_data):
39 | user = User.objects.create(
40 | username=validated_data['username']
41 | )
42 |
43 | user.set_password(validated_data['password'])
44 | user.save()
45 |
46 | return user
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Django Rest Auth with React Vite - 2023
2 |
3 | ## Steps for Running Project
4 |
5 | ### Requirements
6 |
7 | `Python, Node, git`
8 |
9 | ### Clone the repository:
10 |
11 | - Create a empty folder and `cd` into that folder.
12 | - Type the following command to clone project in same directory.
13 |
14 | ```bash
15 | git clone https://github.com/sushil-kamble/django-react-auth.git .
16 | ```
17 |
18 | ## Backend
19 |
20 | ### 1. Go to the root folder and perform the following commands:
21 |
22 | `cd backend/`
23 |
24 | ### 2. Create and activate the virtual environment
25 |
26 | ```bash
27 | python -m venv venv
28 | venv\Scripts\activate
29 | ```
30 |
31 | > If their is any error activating virtual env, please google search it for your system or try `venv\bin\activate` or `source venv/bin/activate`
32 |
33 | ### 3. Install required packages
34 |
35 | ```bash
36 | pip install -r requirements.txt
37 | ```
38 |
39 | ### 4. Run the server
40 |
41 | ```bash
42 | python manage.py migrate
43 | python manage.py runserver
44 | ```
45 |
46 | ## Frontend
47 |
48 | - Head back to the root folder
49 | - Enter in `cd frontend/`
50 |
51 | ### 1. Installing packages
52 |
53 | ```bash
54 | yarn
55 | ```
56 |
57 | If you don't have yarn installed
58 |
59 |
60 | ```bash
61 | npm i
62 | ```
63 |
64 | > Remove **yarn.lock** as you will already have **package.lock**
65 |
66 |
67 |