olly/codebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth works now

Browse Source
This commit is contained in:
Olly Hearn
2023-05-24 11:46:10 +03:00
parent bb225e5fb5
commit 4609ca23fa
8 changed files with 84 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
api/app/backend/settings.py
View File

@ -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",
}

9
api/app/custom_auth/serializers.py Normal file
View File

@ -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

12
api/app/custom_auth/urls.py
View File

@ -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('register/', views.RegisterView.as_view())
# path('token/', views.CustomAuthToken.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'),
]

37
api/app/custom_auth/views.py
View File

@ -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)
return Response({
'token': token.key,
'user_id': user.pk,
'username': user.username
})
refresh = RefreshToken.for_user(user)
return {
'refresh': str(refresh),
'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)
return Response({
'token': token.key,
'user_id': user.pk,
'username': user.username
}, status=200)
refresh = RefreshToken.for_user(user)
return {
'refresh': str(refresh),
'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
# }, status=200)
except Exception as e:
return Response({"message": "Something went wrong, registration is not completed", "error": e}, status=500)

1
api/requirements.txt
View File

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

5
docker-compose.yml
View File

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

24
react/app/src/components/Header.jsx
View File

@ -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,22 +59,26 @@ 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>
<MDBNavbarItem>
<MDBNavbarLink href='#' tabIndex={-2} aria-disabled='true' color='#3b71ca'>
admin
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
<MDBNavbarNav right>
{ user && (
<MDBNavbarItem>
<MDBNavbarLink href='#' aria-disabled='true' background='#3b71ca'>
{user?.username}
</MDBNavbarLink>
</MDBNavbarItem>
)}
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>

20
react/app/src/context/AuthContext.jsx
View File

@ -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",
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
},
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",
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
},
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 = {