isuggest.selfce.st
alternative tangled frontend (extremely wip)
feat: sign out
+24
src/components/Auth/SignOutButton.tsx
+24
src/components/Auth/SignOutButton.tsx
···
···
1
+
import { LucideLogOut } from "@/components/Icons/LucideLogOut";
2
+
import { useOAuth } from "@/lib/oauth";
3
+
import { useNavigate, useRouter } from "@tanstack/react-router";
4
+
5
+
export const SignOutButton = () => {
6
+
const { signOut } = useOAuth();
7
+
const navigate = useNavigate();
8
+
const router = useRouter();
9
+
10
+
const handleSignOut = () => {
11
+
signOut();
12
+
navigate({ to: "/" });
13
+
};
14
+
15
+
return (
16
+
<button
17
+
className="flex cursor-pointer items-center gap-2 pl-2"
18
+
onClick={handleSignOut}
19
+
>
20
+
<LucideLogOut />
21
+
<p className="text-sm">Sign Out</p>
22
+
</button>
23
+
);
24
+
};
+23
src/components/Icons/LucideLogOut.tsx
+23
src/components/Icons/LucideLogOut.tsx
···
···
1
+
import { SVGProps } from "react";
2
+
3
+
export function LucideLogOut(props: SVGProps<SVGSVGElement>) {
4
+
return (
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
width="1em"
8
+
height="1em"
9
+
viewBox="0 0 24 24"
10
+
{...props}
11
+
>
12
+
{/* Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE */}
13
+
<path
14
+
fill="none"
15
+
stroke="currentColor"
16
+
strokeLinecap="round"
17
+
strokeLinejoin="round"
18
+
strokeWidth="2"
19
+
d="m16 17l5-5l-5-5m5 5H9m0 9H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
20
+
/>
21
+
</svg>
22
+
);
23
+
}
+23
src/lib/oauth/index.tsx
+23
src/lib/oauth/index.tsx
···
6
BrowserOAuthClient,
7
OAuthSession,
8
} from "@atproto/oauth-client-browser";
9
import {
10
createContext,
11
ReactNode,
···
21
callbackHandler: (arg0: URLSearchParams) => void;
22
handle: string | null;
23
setHandle: (arg0: string) => void;
24
} | null>(null);
25
26
export const OAuthProvider = ({ children }: { children: ReactNode }) => {
···
48
[client],
49
);
50
51
useEffect(() => {
52
const oAuthClient = new BrowserOAuthClient({
53
//@ts-expect-error fuck it we ball
···
88
callbackHandler,
89
handle,
90
setHandle,
91
};
92
93
return <OAuthContext value={contextValue}>{children}</OAuthContext>;
···
6
BrowserOAuthClient,
7
OAuthSession,
8
} from "@atproto/oauth-client-browser";
9
+
import { useRouter } from "@tanstack/react-router";
10
import {
11
createContext,
12
ReactNode,
···
22
callbackHandler: (arg0: URLSearchParams) => void;
23
handle: string | null;
24
setHandle: (arg0: string) => void;
25
+
signOut: () => void;
26
} | null>(null);
27
28
export const OAuthProvider = ({ children }: { children: ReactNode }) => {
···
50
[client],
51
);
52
53
+
// when we move this to a package, remove this.
54
+
const router = useRouter();
55
+
56
+
const signOut = () => {
57
+
if (!session)
58
+
throw new Error(
59
+
"No OAuth session found. You should be careful about the ordering of your calls. Ensure that the client and the session is loaded before attempting to call `signOut` on the OAuth provider.",
60
+
);
61
+
62
+
session.signOut();
63
+
setSession(null);
64
+
};
65
+
66
+
// When we release the package, we need to remove this and replace it with a prop that takes in any effectful function and runs it here.
67
+
// For now, we just perform the effect.
68
+
69
+
useEffect(() => {
70
+
router.invalidate();
71
+
}, [session]);
72
+
73
useEffect(() => {
74
const oAuthClient = new BrowserOAuthClient({
75
//@ts-expect-error fuck it we ball
···
110
callbackHandler,
111
handle,
112
setHandle,
113
+
signOut,
114
};
115
116
return <OAuthContext value={contextValue}>{children}</OAuthContext>;