add user registration functionality with JWT authentication

Author: phillipnguyenn

client/src/pages/login.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -37,7 +38,9 @@ export default function Login() {
           <CardDescription>
             Enter your email below to login to your account
           </CardDescription>
-          <Button variant="link">Sign Up</Button>
+          <Link href={"/register"}>
+            <Button variant="link">Sign Up</Button>
+          </Link>
         </CardHeader>
         <CardContent>
           <form>

client/src/pages/register.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import api from "@/lib/api";
+
+export default function Signup() {
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  //called from onclick submit to post variables for registration
+  const register = async (
+    email: string,
+    username: string,
+    password: string,
+  ) => {
+    await api.post("/user/register/", {
+      email,
+      username,
+      password,
+    });
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Signup</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-2">
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="Example@mail.com"
+                  required
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              <div className="grid gap-2">
+                <Input
+                  id="username"
+                  type="username"
+                  placeholder="Username"
+                  required
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+              </div>
+              <div className="grid gap-2">
+                <Input
+                  id="password"
+                  type="password"
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex-col gap-2">
+          <Button
+            type="submit"
+            className="w-full"
+            onClick={() => register(email, username, password)}
+          >
+            Signup
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

server/server/settings.py

@@ -77,7 +77,6 @@
 
 REST_FRAMEWORK = {
     "DEFAULT_AUTHENTICATION_CLASSES": (
-        'rest_framework.authentication.SessionAuthentication',
         "rest_framework_simplejwt.authentication.JWTAuthentication",
     ),
 }

server/user/serializers.py

@@ -20,3 +20,18 @@ class Meta:
             "is_staff",
             "is_superuser",
             "profile",)
+
+class RegisterSerializer(serializers.ModelSerializer):
+    password = serializers.CharField(write_only=True)
+
+    class Meta:
+        model = User
+        fields = ("username", "email", "password")
+
+    def create(self, validated_data):
+        user = User.objects.create_user(
+            username=validated_data["username"],
+            email=validated_data.get("email", ""),
+            password=validated_data["password"],
+        )
+        return user

server/user/urls.py

@@ -6,5 +6,6 @@
     path("", views.UserList.as_view(), name="user-list"),
     path("profile/", views.UserProfileList.as_view(), name="profile-list"),
     path("profile/<int:pk>/", views.UserProfileDetail.as_view(), name="user-profile-detail"),
+    path("register/", views.RegisterView.as_view(), name="user-register"),
     ]
 

server/user/views.py

@@ -1,12 +1,13 @@
 from django.shortcuts import render
-from rest_framework import generics, permissions
+from rest_framework import generics, permissions, status
 from rest_framework.generics import ListAPIView
 from rest_framework.response import Response
 from rest_framework.views import APIView
 from .permissions import IsUserOrReadOnly
+from rest_framework.permissions import AllowAny
 
 from .models import Profile, User
-from .serializers import ProfileSerializer, UserSerializer
+from .serializers import ProfileSerializer, UserSerializer, RegisterSerializer
 
 # Create your views here.
 
@@ -25,3 +26,15 @@ class UserProfileDetail(generics.RetrieveUpdateAPIView):
     permission_classes = (permissions.IsAuthenticated, IsUserOrReadOnly)
     queryset = Profile.objects.all()
     serializer_class = ProfileSerializer
+
+class RegisterView(APIView):
+    authentication_classes = []
+    permission_classes = [AllowAny]
+    serializer_class = RegisterSerializer
+    def post(self, request):
+        serializer = RegisterSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)