auth works now

api/app/backend/settings.py

@@ -40,7 +40,8 @@ INSTALLED_APPS = [
     'rest_framework.authtoken',
     "rest_framework",
     "snippets",
-    "custom_auth"
+    "custom_auth",
+    'rest_framework_simplejwt'
 ]
 
 MIDDLEWARE = [
@@ -136,3 +137,13 @@ AUTH_PASSWORD_VALIDATORS = {}
 CORS_ALLOWED_ORIGINS = [
     "*"
 ]
+
+REST_FRAMEWORK = {
+    'DEFAULT_AUTHENTICATION_CLASSES': (
+        'rest_framework_simplejwt.authentication.JWTAuthentication',
+    )
+}
+
+SIMPLE_JWT = {
+  "TOKEN_OBTAIN_SERIALIZER": "custom_auth.serializers.MyTokenObtainPairSerializer",
+}

api/app/custom_auth/serializers.py

@@ -0,0 +1,9 @@
+from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
+from rest_framework_simplejwt.views import TokenObtainPairView
+
+class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
+    @classmethod
+    def get_token(cls, user):
+        token = super().get_token(user)
+        token['username'] = user.username
+        return token

api/app/custom_auth/urls.py

@@ -1,8 +1,16 @@
 from django.urls import path, include
 from custom_auth import views
+from rest_framework_simplejwt.views import (
+    TokenObtainPairView,
+    TokenRefreshView,
+    TokenVerifyView,
+)
 
 urlpatterns = [
     path('', include('rest_framework.urls')),
-    path('token/', views.CustomAuthToken.as_view()),
+    # path('token/', views.CustomAuthToken.as_view()),
-    path('register/', views.RegisterView.as_view())
+    path('register/', views.RegisterView.as_view()),
+    path('token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
+    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
+    path('token/verify/', TokenVerifyView.as_view(), name='token_verify'),
 ]

api/app/custom_auth/views.py

@@ -4,6 +4,7 @@ from rest_framework.response import Response
 from rest_framework.request import Request
 from rest_framework.views import APIView
 from django.contrib.auth.models import User
+from rest_framework_simplejwt.tokens import RefreshToken
 
 class CustomAuthToken(ObtainAuthToken):
 
@@ -12,12 +13,19 @@ class CustomAuthToken(ObtainAuthToken):
                                            context={'request': request})
         serializer.is_valid(raise_exception=True)
         user = serializer.validated_data['user']
-        token, created = Token.objects.get_or_create(user=user)
+        refresh = RefreshToken.for_user(user)
-        return Response({
+
-            'token': token.key,
+        return {
-            'user_id': user.pk,
+            'refresh': str(refresh),
-            'username': user.username
+            'access': str(refresh.access_token),
-        })
+        }
+        #
+        # token, created = Token.objects.get_or_create(user=user)
+        # return Response({
+        #     'token': token.key,
+        #     'user_id': user.pk,
+        #     'username': user.username
+        # })
 
 
 class RegisterView(APIView):
@@ -45,11 +53,16 @@ class RegisterView(APIView):
                 username=username,
                 password=password
             )
-            token, created = Token.objects.get_or_create(user=user)
+            refresh = RefreshToken.for_user(user)
-            return Response({
+            return {
-                'token': token.key,
+                'refresh': str(refresh),
-                'user_id': user.pk,
+                'access': str(refresh.access_token),
-                'username': user.username
+            }
-            }, status=200)
+            # token, created = Token.objects.get_or_create(user=user)
+            # return Response({
+            #     'token': token.key,
+            #     'user_id': user.pk,
+            #     'username': user.username
+            # }, status=200)
         except Exception as e:
             return Response({"message": "Something went wrong, registration is not completed", "error": e}, status=500)

api/requirements.txt

@@ -1,4 +1,5 @@
 django
 django-rest-framework
 django-cors-headers
+djangorestframework-simplejwt
 pygments

docker-compose.yml

@@ -16,7 +16,8 @@ services:
             - "3000"
         environment:
             - WDS_SOCKET_PORT=0
-        # volumes:
+        volumes:
+            - ./react/app:/app:z
             # - ./docker_cache/node_modules:/app/node_modules
     nginx:
         image: nginx:1.23.4

react/app/src/components/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import {
   MDBContainer,
   MDBNavbar,
@@ -18,9 +18,11 @@ import {
 import 'mdb-react-ui-kit/dist/css/mdb.min.css';
 import "@fortawesome/fontawesome-free/css/all.min.css";
 import { Link } from 'react-router-dom';
+import AuthContext from "../context/AuthContext";
 
 export default function App() {
   const [showBasic, setShowBasic] = useState(false);
+  const { user } = useContext(AuthContext);
 
   return (
     <MDBNavbar expand='lg' light bgColor='light'>
@@ -46,7 +48,7 @@ export default function App() {
               </MDBNavbarLink>
             </MDBNavbarItem>
             <MDBNavbarItem>
-              <MDBNavbarLink href='#'>Link</MDBNavbarLink>
+              <MDBNavbarLink href='#'>News</MDBNavbarLink>
             </MDBNavbarItem>
 
             <MDBNavbarItem>
@@ -57,21 +59,25 @@ export default function App() {
                 <MDBDropdownMenu>
                   <MDBDropdownItem link>Public snippets</MDBDropdownItem>
                   <MDBDropdownItem link>My snippets</MDBDropdownItem>
-                  <MDBDropdownItem link>Something else here</MDBDropdownItem>
+                  <MDBDropdownItem link>Shared to me snippets</MDBDropdownItem>
                 </MDBDropdownMenu>
               </MDBDropdown>
             </MDBNavbarItem>
 
             <MDBNavbarItem>
-              <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
+              <MDBNavbarLink disabled={user && false} href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
                 New snippet
               </MDBNavbarLink>
             </MDBNavbarItem>
+          </MDBNavbarNav>
+          <MDBNavbarNav right>
+            { user && (
                     <MDBNavbarItem>
-              <MDBNavbarLink href='#' tabIndex={-2} aria-disabled='true' color='#3b71ca'>
+                        <MDBNavbarLink href='#' aria-disabled='true' background='#3b71ca'>
-                admin
+                            {user?.username}
                         </MDBNavbarLink>
                     </MDBNavbarItem>
+                    )}
         </MDBNavbarNav>
         </MDBCollapse>
       </MDBContainer>

react/app/src/context/AuthContext.jsx

@@ -2,7 +2,7 @@ import { createContext, useState, useEffect } from "react";
 import jwt_decode from "jwt-decode";
 import { useNavigate } from "react-router-dom";
 
-const AuthContext = createContext("");
+const AuthContext = createContext();
 
 export default AuthContext;
 
@@ -25,8 +25,7 @@ export const AuthProvider = ({ children }) => {
     const response = await fetch("http://127.0.0.1/api/auth/token/", {
       method: "POST",
       headers: {
-        "Content-Type": "application/json",
+        "Content-Type": "application/json"
-        "Access-Control-Allow-Origin": "*",
       },
       body: JSON.stringify({
         username,
@@ -36,30 +35,29 @@ export const AuthProvider = ({ children }) => {
     const data = await response.json();
 
     if (response.status === 200) {
-      console.log(response, data)
       setAuthTokens(data);
       setUser(jwt_decode(data.access));
       localStorage.setItem("authTokens", JSON.stringify(data));
-      history.push("/");
+      history("/");
     } else {
       alert("Something went wrong!");
     }
   };
 
-  const registerUser = async (username, password) => {
+  const registerUser = async (username, password, password2) => {
     const response = await fetch("http://127.0.0.1/api/auth/register/", {
       method: "POST",
       headers: {
-        "Content-Type": "application/json",
+        "Content-Type": "application/json"
-        "Access-Control-Allow-Origin": "*",
       },
       body: JSON.stringify({
         username,
-        password
+        password,
+        password2
       })
     });
     if (response.status === 201) {
-      history.push("/login");
+      history("/login");
     } else {
       alert("Something went wrong!");
     }
@@ -69,7 +67,7 @@ export const AuthProvider = ({ children }) => {
     setAuthTokens(null);
     setUser(null);
     localStorage.removeItem("authTokens");
-    history.push("/");
+    history("/");
   };
 
   const contextData = {