/
auth.callback.tsx
75 lines (64 loc) · 2.15 KB
/
auth.callback.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { useEffect } from 'react';
import { setAuthSession } from '~/api/supabase-auth.server';
import { supabaseClient } from '~/services/supabase.client';
import { authCookie } from '~/services/supabase.server';
import type { ActionFunction } from '@remix-run/node';
import { redirect } from '@remix-run/node';
import {
useFetcher,
useSearchParams,
} from '@remix-run/react';
import type {
AuthChangeEvent,
Session,
} from '@supabase/supabase-js';
export const action: ActionFunction = async ({ request }) => {
const formData = await request.formData();
const formDataSession = formData.get("session") as string | null;
const event = formData.get("event") as AuthChangeEvent | null;
const redirectTo = String(formData.get("redirectTo")) || "/profile";
if (!formDataSession || !event) {
return redirect("/login");
}
const SupabaseSession: Session = JSON.parse(formDataSession);
let session = await authCookie.getSession(request.headers.get("Cookie"));
const { access_token: accessToken, refresh_token: refreshToken } =
SupabaseSession;
session = setAuthSession(session, accessToken, refreshToken || "");
if (event === "SIGNED_IN") {
return redirect(redirectTo, {
headers: {
"Set-Cookie": await authCookie.commitSession(session),
},
});
} else if (event === "PASSWORD_RECOVERY") {
return redirect("/change-password", {
headers: {
"Set-Cookie": await authCookie.commitSession(session),
},
});
}
redirect("/login");
};
export default function authCallback() {
const fetcher = useFetcher();
const [searchParams] = useSearchParams();
useEffect(() => {
const { data: authListener } = supabaseClient.auth.onAuthStateChange(
(event, session) => {
const formData = new FormData();
formData.append("session", JSON.stringify(session));
formData.append("event", event);
formData.append(
"redirectTo",
searchParams.get("redirectTo") || "/profile"
);
fetcher.submit(formData, { method: "post" });
}
);
return () => {
authListener?.unsubscribe();
};
}, [fetcher, searchParams]);
return null;
}