Checkpoint: Implémentation authentification hybride (cookies + Authorization header) - Résolution du problème de connexion dans l'environnement de preview Manus
This commit is contained in:
@@ -36,6 +36,8 @@ export function useAuth(options?: UseAuthOptions) {
|
|||||||
}
|
}
|
||||||
throw error;
|
throw error;
|
||||||
} finally {
|
} finally {
|
||||||
|
// Supprimer le token de localStorage
|
||||||
|
localStorage.removeItem('auth_token');
|
||||||
utils.auth.me.setData(undefined, null);
|
utils.auth.me.setData(undefined, null);
|
||||||
await utils.auth.me.invalidate();
|
await utils.auth.me.invalidate();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,9 +43,22 @@ const trpcClient = trpc.createClient({
|
|||||||
url: "/api/trpc",
|
url: "/api/trpc",
|
||||||
transformer: superjson,
|
transformer: superjson,
|
||||||
fetch(input, init) {
|
fetch(input, init) {
|
||||||
|
// Récupérer le token depuis localStorage
|
||||||
|
const token = localStorage.getItem('auth_token');
|
||||||
|
|
||||||
|
const headers: HeadersInit = {
|
||||||
|
...(init?.headers || {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Ajouter le header Authorization si un token existe
|
||||||
|
if (token) {
|
||||||
|
headers['Authorization'] = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
|
||||||
return globalThis.fetch(input, {
|
return globalThis.fetch(input, {
|
||||||
...(init ?? {}),
|
...(init ?? {}),
|
||||||
credentials: "include",
|
credentials: "include",
|
||||||
|
headers,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -16,7 +16,11 @@ export default function Login() {
|
|||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
const loginMutation = trpc.auth.login.useMutation({
|
const loginMutation = trpc.auth.login.useMutation({
|
||||||
onSuccess: () => {
|
onSuccess: (data) => {
|
||||||
|
// Stocker le token dans localStorage
|
||||||
|
if (data.token) {
|
||||||
|
localStorage.setItem('auth_token', data.token);
|
||||||
|
}
|
||||||
// Rediriger vers le tableau de bord admin
|
// Rediriger vers le tableau de bord admin
|
||||||
window.location.href = "/admin";
|
window.location.href = "/admin";
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -18,7 +18,11 @@ export default function Register() {
|
|||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
const registerMutation = trpc.auth.register.useMutation({
|
const registerMutation = trpc.auth.register.useMutation({
|
||||||
onSuccess: () => {
|
onSuccess: (data) => {
|
||||||
|
// Stocker le token dans localStorage
|
||||||
|
if (data.token) {
|
||||||
|
localStorage.setItem('auth_token', data.token);
|
||||||
|
}
|
||||||
// Rediriger vers le tableau de bord
|
// Rediriger vers le tableau de bord
|
||||||
window.location.href = "/";
|
window.location.href = "/";
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -16,8 +16,16 @@ export async function createContext(
|
|||||||
let user: User | null = null;
|
let user: User | null = null;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Récupérer le token JWT depuis le cookie
|
// Essayer de récupérer le token depuis le cookie d'abord
|
||||||
const token = opts.req.cookies[COOKIE_NAME];
|
let token = opts.req.cookies[COOKIE_NAME];
|
||||||
|
|
||||||
|
// Si pas de cookie, essayer le header Authorization
|
||||||
|
if (!token) {
|
||||||
|
const authHeader = opts.req.headers.authorization;
|
||||||
|
if (authHeader && authHeader.startsWith('Bearer ')) {
|
||||||
|
token = authHeader.substring(7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (token) {
|
if (token) {
|
||||||
// Vérifier et décoder le token
|
// Vérifier et décoder le token
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ export const appRouter = router({
|
|||||||
const cookieOptions = getSessionCookieOptions(ctx.req);
|
const cookieOptions = getSessionCookieOptions(ctx.req);
|
||||||
ctx.res.cookie(COOKIE_NAME, token, { ...cookieOptions, maxAge: 30 * 24 * 60 * 60 * 1000 }); // 30 jours
|
ctx.res.cookie(COOKIE_NAME, token, { ...cookieOptions, maxAge: 30 * 24 * 60 * 60 * 1000 }); // 30 jours
|
||||||
|
|
||||||
return { success: true, userId };
|
return { success: true, userId, token };
|
||||||
}),
|
}),
|
||||||
|
|
||||||
login: publicProcedure
|
login: publicProcedure
|
||||||
@@ -86,9 +86,7 @@ export const appRouter = router({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Vérifier le mot de passe
|
// Vérifier le mot de passe
|
||||||
console.log('[LOGIN] Verifying password for:', user.email);
|
|
||||||
const isValid = await verifyPassword(input.password, user.password);
|
const isValid = await verifyPassword(input.password, user.password);
|
||||||
console.log('[LOGIN] Password valid:', isValid);
|
|
||||||
if (!isValid) {
|
if (!isValid) {
|
||||||
throw new TRPCError({ code: 'UNAUTHORIZED', message: 'Email ou mot de passe incorrect' });
|
throw new TRPCError({ code: 'UNAUTHORIZED', message: 'Email ou mot de passe incorrect' });
|
||||||
}
|
}
|
||||||
@@ -103,7 +101,7 @@ export const appRouter = router({
|
|||||||
const cookieOptions = getSessionCookieOptions(ctx.req);
|
const cookieOptions = getSessionCookieOptions(ctx.req);
|
||||||
ctx.res.cookie(COOKIE_NAME, token, { ...cookieOptions, maxAge: 30 * 24 * 60 * 60 * 1000 }); // 30 jours
|
ctx.res.cookie(COOKIE_NAME, token, { ...cookieOptions, maxAge: 30 * 24 * 60 * 60 * 1000 }); // 30 jours
|
||||||
|
|
||||||
return { success: true, user: { id: user.id, email: user.email, name: user.name, role: user.role } };
|
return { success: true, user: { id: user.id, email: user.email, name: user.name, role: user.role }, token };
|
||||||
}),
|
}),
|
||||||
|
|
||||||
logout: publicProcedure.mutation(({ ctx }) => {
|
logout: publicProcedure.mutation(({ ctx }) => {
|
||||||
|
|||||||
17
todo.md
17
todo.md
@@ -273,3 +273,20 @@
|
|||||||
- [x] Vérifier que le contexte tRPC récupère correctement l'utilisateur depuis le cookie
|
- [x] Vérifier que le contexte tRPC récupère correctement l'utilisateur depuis le cookie
|
||||||
- [x] Corriger le problème de redirection (redirection directe vers /admin au lieu de /)
|
- [x] Corriger le problème de redirection (redirection directe vers /admin au lieu de /)
|
||||||
- [x] Tester la connexion complète
|
- [x] Tester la connexion complète
|
||||||
|
|
||||||
|
## Correction vérification de session après connexion
|
||||||
|
|
||||||
|
- [ ] Diagnostiquer pourquoi la session n'est pas reconnue après connexion
|
||||||
|
- [ ] Vérifier que le cookie est correctement défini et lu
|
||||||
|
- [ ] Vérifier la logique de vérification JWT dans le contexte tRPC
|
||||||
|
- [ ] Corriger la vérification de session
|
||||||
|
- [ ] Tester la connexion complète avec vérification de session
|
||||||
|
|
||||||
|
## Implémentation authentification hybride (cookies + Authorization header)
|
||||||
|
|
||||||
|
- [x] Modifier le contexte tRPC pour lire le token depuis le header Authorization en plus des cookies
|
||||||
|
- [x] Modifier les procédures login/register pour retourner le token au client
|
||||||
|
- [x] Stocker le token dans localStorage côté client
|
||||||
|
- [x] Modifier le client tRPC pour envoyer le token dans le header Authorization
|
||||||
|
- [x] Tester la connexion dans l'environnement de preview Manus
|
||||||
|
- [x] Vérifier que la solution fonctionne aussi en production
|
||||||
|
|||||||
Reference in New Issue
Block a user