Implement user authentication with JWT, including login and registration features by Davictory2003 · Pull Request #52 · ChicoState/cheat-sheet

Davictory2003 · 2026-04-20T18:36:40Z

No description provided.

…ion features

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds JWT-based authentication (login/registration/token refresh) across the Django backend and React frontend, wiring routing + an auth context provider so the UI can log in/out and display the current user.

Changes:

Introduce an AuthContext in the frontend with login/register/logout and periodic token refresh
Add /api/token/, /api/token/refresh/, and /api/register/ endpoints backed by SimpleJWT + a user serializer
Update the app shell to use React Router routes and show auth controls in the header

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
frontend/src/main.jsx	Wraps the app with `BrowserRouter` and `AuthProvider`
frontend/src/context/AuthContext.jsx	Adds auth state management, JWT decode, token refresh, and auth actions
frontend/src/components/Login.jsx	Adds login form wired to `AuthContext`
frontend/src/components/SignUp.jsx	Adds registration form wired to `AuthContext`
frontend/src/App.jsx	Adds routes for login/signup and header auth UI
frontend/src/App.css	Adjusts `.btn` styling and hover behavior (used by auth links/buttons)
frontend/package.json	Adds `jwt-decode` and `react-router-dom` dependencies
backend/requirements.txt	Adds `djangorestframework-simplejwt`
backend/cheat_sheet/settings.py	Enables JWTAuthentication in DRF settings
backend/api/views.py	Adds custom token view and registration view
backend/api/urls.py	Exposes token, refresh, and register endpoints
backend/api/serializers.py	Adds user serializer and custom token claims

Files not reviewed (1)

frontend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  const [authTokens, setAuthTokens] = useState(() =>
+    localStorage.getItem('authTokens') ? JSON.parse(localStorage.getItem('authTokens')) : null
+  );
+  const [user, setUser] = useState(() =>
+    localStorage.getItem('authTokens') ? jwtDecode(localStorage.getItem('authTokens')) : null
+  );


+      const response = await fetch('/api/token/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.status === 200) {


+      if (response.status === 201) {
+        // Auto login after registration
+        loginUser(username, password);
+      } else {
+        const data = await response.json();
+        const errorMessage = typeof data === 'object' ? JSON.stringify(data) : 'Registration failed';
+        alert(`Registration failed: ${errorMessage}`);
+      }


+      if (response.status === 200) {
+        setAuthTokens(data);
+        setUser(jwtDecode(data.access));
+        localStorage.setItem('authTokens', JSON.stringify(data));


+  const logoutUser = () => {
+    setAuthTokens(null);
+    setUser(null);
+    localStorage.removeItem('authTokens');


+          navigate('/login');
+        }
+      } catch (err) {
+        console.error('Token refresh failed', err);


+        "rest_framework_simplejwt.authentication.JWTAuthentication",
+    ),
    "DEFAULT_PERMISSION_CLASSES": [
        "rest_framework.permissions.AllowAny",


+          <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500, color: 'var(--text)' }}>Username</label>
+          <input
+            type="text"
+            placeholder="Enter your username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="input-field"
+            required


+          <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500, color: 'var(--text)' }}>Username</label>
+          <input
+            type="text"
+            placeholder="Choose a username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="input-field"
+            required
+            style={{ marginBottom: 0 }}
+          />
+        </div>
+        <div>
+          <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 500, color: 'var(--text)' }}>Password</label>
+          <input
+            type="password"
+            placeholder="Choose a password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Davictory2003 · 2026-04-20T19:54:44Z

@copilot apply changes based on the comments in this thread

…rmissions Agent-Logs-Url: https://github.com/ChicoState/cheat-sheet/sessions/c698eda3-f6c3-4ef7-ae11-c8fae0da2fd9 Co-authored-by: Davictory2003 <68972845+Davictory2003@users.noreply.github.com>

…ndly registration errors Agent-Logs-Url: https://github.com/ChicoState/cheat-sheet/sessions/c698eda3-f6c3-4ef7-ae11-c8fae0da2fd9 Co-authored-by: Davictory2003 <68972845+Davictory2003@users.noreply.github.com>

Copilot · 2026-04-20T20:02:58Z

@copilot apply changes based on the comments in this thread

Applied all changes from the review thread (commits 80532e4 and e9ef289):

AuthContext.jsx:

Fixed jwtDecode being called on the raw JSON string — now tokens are stored in-memory (React state only, no localStorage) to eliminate the XSS exposure; jwtDecode is only called on the data.access string
Added .catch(() => ({ detail: 'Invalid server response' })) defensive parsing on all response.json() calls so non-JSON error responses don't throw
loginUser is now await-ed inside registerUser (was fire-and-forget)
Registration error messages now format API field errors into human-readable text (e.g. username: A user with that username already exists.) instead of raw JSON.stringify
On token refresh exception, auth state is now cleared and user is navigated to /login instead of silently retrying

settings.py / views.py:

Default DRF permission changed to IsAuthenticated; health_check gets explicit @permission_classes([AllowAny]); RegisterView and SimpleJWT views already manage their own permissions

Login.jsx / SignUp.jsx:

All <label> elements now have htmlFor tied to matching id on <input>, plus autoComplete attributes (username, current-password, new-password)

tests.py:

Added auth_client fixture using force_authenticate; all 40 tests pass under the new IsAuthenticated default

Copilot

Pull request overview

Implements JWT-based authentication (login + registration) across the Django REST backend and the React frontend, introducing routing/auth context on the client and SimpleJWT endpoints/permissions on the server.

Changes:

Frontend: add AuthContext provider, login/signup pages, and React Router routes/navigation.
Backend: enable SimpleJWT, add token + refresh + register endpoints, and switch DRF default permissions to authenticated-by-default.
Tests: update API tests to authenticate requests via a new fixture.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
frontend/src/main.jsx	Wraps the app in React Router + `AuthProvider`.
frontend/src/context/AuthContext.jsx	Adds JWT login/register/logout and periodic refresh logic.
frontend/src/components/Login.jsx	New login form component.
frontend/src/components/SignUp.jsx	New registration form component.
frontend/src/App.jsx	Adds routes and header UI for auth actions.
frontend/src/App.css	Updates `.btn` styling and hover behavior.
frontend/package.json	Adds `jwt-decode` and `react-router-dom`.
frontend/package-lock.json	Locks new frontend dependencies.
backend/requirements.txt	Adds `djangorestframework-simplejwt`.
backend/cheat_sheet/settings.py	Enables JWT auth + changes default permissions to `IsAuthenticated`.
backend/api/views.py	Adds custom token view + register view; allows anonymous health check.
backend/api/urls.py	Adds token/refresh/register routes.
backend/api/tests.py	Adds authenticated client fixture; updates tests to use it.
backend/api/serializers.py	Adds user registration serializer + custom token claims serializer.

Files not reviewed (1)

frontend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+        const data = await response.json().catch(() => ({ detail: 'Invalid server response' }));
+
+        if (response.ok) {
+          setAuthTokens(data);


bdtran2002 · 2026-04-20T23:24:11Z

+    ),
    "DEFAULT_PERMISSION_CLASSES": [
-        "rest_framework.permissions.AllowAny",
+        "rest_framework.permissions.IsAuthenticated",


@Davictory2003

bdtran2002 · 2026-04-20T23:23:53Z

+        <Routes>
+          <Route path="/" element={
+            <CreateCheatSheet 
+              initialData={cheatSheet} 
+              onSave={handleSave} 
+              onReset={handleReset}
+              isSaving={isSaving}
+              onCancel={() => {}} 
+            />
+          } />
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<SignUp />} />
+        </Routes>


@Davictory2003

bdtran2002 · 2026-04-20T23:25:20Z

+@pytest.fixture
+def auth_client(db):
+    """Authenticated API client (bypasses JWT for speed)."""
+    client = APIClient()
+    user = User.objects.create_user(username="testuser", password="testpass123")
+    client.force_authenticate(user=user)
+    return client


@Davictory2003

+    path('register/', views.RegisterView.as_view(), name='register'),
+
    path("health/", views.health_check, name="health-check"),
    path("classes/", views.get_classes, name="get-classes"),


bdtran2002 · 2026-04-20T23:25:00Z

+class UserSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = User
+        fields = ('id', 'username', 'password')
+        extra_kwargs = {'password': {'write_only': True}}
+
+    def create(self, validated_data):
+        user = User.objects.create_user(
+            username=validated_data['username'],
+            password=validated_data['password']
+        )


@Davictory2003

Davictory2003 · 2026-04-21T00:29:41Z

@copilot apply changes based on the comments in this thread

…word validation, auth endpoint tests Agent-Logs-Url: https://github.com/ChicoState/cheat-sheet/sessions/660affe3-e8c1-4d15-84ff-21145c2762ff Co-authored-by: Davictory2003 <68972845+Davictory2003@users.noreply.github.com>

Copilot · 2026-04-21T00:36:28Z

@copilot apply changes based on the comments in this thread

Applied all changes from the review thread in commit d638d08:

AuthContext.jsx: Token refresh now merges response into existing state ({ ...prev, ...data }) to preserve the refresh token when SimpleJWT only returns a new access token
settings.py: Reverted default permission to AllowAny — the frontend hooks (formulas.js, latex.js, App.jsx) call core API endpoints without auth headers, so IsAuthenticated globally was causing 401s on all main flows; RegisterView keeps its own explicit AllowAny
App.jsx: Added a PrivateRoute component (uses Navigate from react-router-dom) that redirects unauthenticated users to /login; the / route is now wrapped with it
tests.py: Added TestRegisterEndpoint and TestTokenEndpoints covering registration success, duplicate username, weak/common password rejection, token obtain/refresh success, and invalid credential/token failures (8 new tests, 48 total pass)
urls.py: Removed trailing whitespace and extra blank lines inside urlpatterns
serializers.py: Added validate_password field validator to UserSerializer that enforces all configured AUTH_PASSWORD_VALIDATORS and returns 400 with field-level errors on failure

Implement user authentication with JWT, including login and registrat…

55cc1c8

…ion features

Copilot AI review requested due to automatic review settings April 20, 2026 18:36

Copilot started reviewing on behalf of Davictory2003 April 20, 2026 18:37 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

Potential fix for pull request finding

cafa5d0

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot started work on behalf of Davictory2003 April 20, 2026 19:54 View session

Copilot AI and others added 2 commits April 20, 2026 20:00

Apply review feedback: fix auth bugs, security, accessibility, and pe…

80532e4

…rmissions Agent-Logs-Url: https://github.com/ChicoState/cheat-sheet/sessions/c698eda3-f6c3-4ef7-ae11-c8fae0da2fd9 Co-authored-by: Davictory2003 <68972845+Davictory2003@users.noreply.github.com>

Improve error messages: descriptive JSON parse fallback and user-frie…

e9ef289

…ndly registration errors Agent-Logs-Url: https://github.com/ChicoState/cheat-sheet/sessions/c698eda3-f6c3-4ef7-ae11-c8fae0da2fd9 Co-authored-by: Davictory2003 <68972845+Davictory2003@users.noreply.github.com>

Davictory2003 requested a review from Copilot April 20, 2026 20:03

Copilot finished work on behalf of Davictory2003 April 20, 2026 20:04

Copilot AI reviewed Apr 20, 2026

View reviewed changes

bdtran2002 approved these changes Apr 20, 2026

View reviewed changes

Copilot started work on behalf of Davictory2003 April 21, 2026 00:29 View session

Copilot finished work on behalf of Davictory2003 April 21, 2026 00:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement user authentication with JWT, including login and registration features#52

Implement user authentication with JWT, including login and registration features#52
Davictory2003 wants to merge 5 commits intomainfrom
database

Davictory2003 commented Apr 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Davictory2003 commented Apr 20, 2026

Uh oh!

Copilot AI commented Apr 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

bdtran2002 Apr 20, 2026

Uh oh!

bdtran2002 Apr 20, 2026

Uh oh!

bdtran2002 Apr 20, 2026

Uh oh!

bdtran2002 Apr 20, 2026

Uh oh!

Davictory2003 commented Apr 21, 2026

Uh oh!

Copilot AI commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Davictory2003 commented Apr 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Davictory2003 commented Apr 20, 2026

Uh oh!

Copilot AI commented Apr 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

bdtran2002 Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

bdtran2002 Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

bdtran2002 Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

bdtran2002 Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Davictory2003 commented Apr 21, 2026

Uh oh!

Copilot AI commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants