This repository has no description
fix login
author
damedotblog
date
(Apr 22, 2025, 2:50 PM -0400)
commit
e5e827d1
e5e827d1814ba0775131f51284f5d11386e49218
parent
86fc4db1
86fc4db1fb260deb9948c15ef3a7d970eb71d798
+60
-14
+14
-2
src/components/Login/Login.js
+14
-2
src/components/Login/Login.js
···
9
9
const navigate = useNavigate();
10
10
const location = useLocation();
11
11
12
+
// Extract returnUrl from query parameters
12
13
const queryParams = new URLSearchParams(location.search);
13
14
const returnUrl = queryParams.get('returnUrl') || '/verifier';
14
15
16
+
console.log('Login component loaded, returnUrl =', returnUrl);
17
+
15
18
useEffect(() => {
19
+
// If already authenticated, redirect to returnUrl
16
20
if (isAuthenticated) {
17
21
console.log('Already authenticated, redirecting from Login page to:', returnUrl);
18
22
navigate(returnUrl, { replace: true });
···
26
30
const handleSubmit = async (event) => {
27
31
event.preventDefault();
28
32
console.log(`Login attempt for handle: ${handle || 'default PDS'}, returnUrl: ${returnUrl}`);
29
-
await login(handle || null, returnUrl);
33
+
34
+
// Call the login function from AuthContext
35
+
// The returnUrl is passed so the user can be redirected after successful login
36
+
try {
37
+
await login(handle || null, returnUrl);
38
+
} catch (err) {
39
+
console.error('Login error:', err);
40
+
// Error handling is done through the AuthContext error state
41
+
}
30
42
};
31
43
32
44
if (isAuthenticated) {
···
56
68
{error && <p className="login-error-message">Login failed: {error}</p>}
57
69
<button
58
70
type="submit"
59
-
disabled={loading}
71
+
disabled={loading || isAuthenticated}
60
72
className="login-submit-button"
61
73
>
62
74
{loading ? 'Processing...' : 'Login with Bluesky'}
+19
-9
src/components/ProtectedRoute.jsx
+19
-9
src/components/ProtectedRoute.jsx
···
1
-
import React from 'react';
1
+
import React, { useEffect } from 'react';
2
2
import { Navigate, useLocation } from 'react-router-dom';
3
3
import { useAuth } from '../contexts/AuthContext';
4
4
5
5
const ProtectedRoute = ({ children }) => {
6
-
const { isAuthenticated, authLoading } = useAuth(); // Assuming 'authLoading' is the correct name from context
6
+
const { isAuthenticated, loading, session } = useAuth();
7
7
const location = useLocation();
8
8
9
-
if (authLoading) {
10
-
// Optional: Display a loading indicator while checking auth status
11
-
return <div>Loading authentication status...</div>;
9
+
useEffect(() => {
10
+
console.log('ProtectedRoute:', {
11
+
isAuthenticated,
12
+
loading,
13
+
hasDid: session?.did ? true : false,
14
+
path: location.pathname
15
+
});
16
+
}, [isAuthenticated, loading, session, location]);
17
+
18
+
// Only show loading state when actively checking auth
19
+
if (loading) {
20
+
console.log('ProtectedRoute: Auth is still loading');
21
+
return <div>Checking authentication status...</div>;
12
22
}
13
23
24
+
// If not authenticated, redirect to login
14
25
if (!isAuthenticated) {
15
-
// User not logged in, redirect to login page
16
-
// Preserve the original intended location in the state
17
-
return <Navigate to={`/login?returnUrl=${location.pathname}${location.search}`} replace />;
26
+
console.log('ProtectedRoute: Not authenticated, redirecting to login');
27
+
return <Navigate to={`/login?returnUrl=${encodeURIComponent(location.pathname + location.search)}`} replace />;
18
28
}
19
29
20
-
// User is authenticated, render the child component
30
+
console.log('ProtectedRoute: Authentication confirmed, rendering protected content');
21
31
return children;
22
32
};
23
33
+4
src/components/Verifier/Verifier.css
+4
src/components/Verifier/Verifier.css
+23
-3
src/contexts/AuthContext.js
+23
-3
src/contexts/AuthContext.js
···
51
51
setClient(oauthClient); // Store the client instance
52
52
53
53
// Initialize the client - this handles callbacks and session restoration
54
+
console.log('(AuthProvider) Initializing OAuth client...');
54
55
const initResult = await oauthClient.init();
56
+
console.log('(AuthProvider) Init result:', {
57
+
hasSession: !!initResult?.session,
58
+
hasState: !!initResult?.state,
59
+
did: initResult?.session?.did
60
+
});
55
61
56
62
if (initResult?.session) {
57
63
setSession(initResult.session);
···
68
74
}
69
75
} catch (err) {
70
76
console.error('(AuthProvider) Error initializing client or handling callback:', err);
71
-
setError('Initialization failed. Please try refreshing.');
77
+
setError('Authentication initialization failed. Please try refreshing.');
72
78
setSession(null);
73
79
} finally {
74
80
setLoading(false);
···
86
92
setError("Client not initialized.");
87
93
return;
88
94
}
89
-
console.log(`(AuthProvider) Initiating client-side login for handle: ${handle || 'none specified'}`);
95
+
console.log(`(AuthProvider) Initiating client-side login for handle: ${handle || 'none specified'}, returnUrl: ${returnUrl}`);
90
96
try {
91
97
// The state can be used to pass information through the redirect, like the return URL
92
98
const stateData = JSON.stringify({ returnUrl });
···
104
110
105
111
// Updated Logout function - uses session.signOut()
106
112
const logout = useCallback(async () => {
107
-
if (!session) return;
113
+
if (!session) {
114
+
console.log('(AuthProvider) No active session to log out');
115
+
return;
116
+
}
117
+
108
118
console.log('(AuthProvider) Logging out...');
109
119
try {
110
120
await session.signOut(); // Use session's signOut method
···
120
130
window.location.href = '/'; // Force reload
121
131
}
122
132
}, [session]);
133
+
134
+
// Debug effect to log auth state changes
135
+
useEffect(() => {
136
+
console.log('(AuthProvider) Auth state updated:', {
137
+
isAuthenticated: !!session,
138
+
did: session?.did || null,
139
+
loading,
140
+
hasError: !!error
141
+
});
142
+
}, [session, loading, error]);
123
143
124
144
return (
125
145
<AuthContext.Provider