64 |
69 |
70 |
71 | ( 12 | providerId?: LiteralUnion
,
13 | options?: SignInOptions,
14 | authorizationParams?: SignInAuthorizationParams,
15 | ) {
16 | const { callbackUrl = window.location.href, redirect = true } = options ?? {};
17 |
18 | // TODO: Support custom providers
19 | const isCredentials = providerId === "credentials";
20 | const isEmail = providerId === "email";
21 | const isSupportingReturn = isCredentials || isEmail;
22 |
23 | // TODO: Handle custom base path
24 | const signInUrl = `/api/auth/${isCredentials ? "callback" : "signin"}/${providerId}`;
25 |
26 | const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`;
27 |
28 | // TODO: Handle custom base path
29 | const csrfTokenResponse = await fetch("/api/auth/csrf");
30 | const { csrfToken } = await csrfTokenResponse.json();
31 |
32 | const res = await fetch(_signInUrl, {
33 | method: "post",
34 | headers: {
35 | "Content-Type": "application/x-www-form-urlencoded",
36 | "X-Auth-Return-Redirect": "1",
37 | },
38 | // @ts-expect-error -- ignore
39 | body: new URLSearchParams({
40 | ...options,
41 | csrfToken,
42 | callbackUrl,
43 | }),
44 | });
45 |
46 | const data = await res.clone().json();
47 | const error = new URL(data.url).searchParams.get("error");
48 | if (redirect || !isSupportingReturn || !error) {
49 | // TODO: Do not redirect for Credentials and Email providers by default in next major
50 | window.location.href = data.url ?? data.redirect ?? callbackUrl;
51 | // If url contains a hash, the browser does not reload the page. We reload manually
52 | if (data.url.includes("#")) window.location.reload();
53 | return;
54 | }
55 | return res;
56 | }
57 |
58 | /**
59 | * Signs the user out, by removing the session cookie.
60 | * Automatically adds the CSRF token to the request.
61 | *
62 | * [Documentation](https://next-auth.js.org/getting-started/client#signout)
63 | */
64 | export async function signOut(options?: SignOutParams) {
65 | const { callbackUrl = window.location.href } = options ?? {};
66 | // TODO: Custom base path
67 | const csrfTokenResponse = await fetch("/api/auth/csrf");
68 | const { csrfToken } = await csrfTokenResponse.json();
69 | const res = await fetch(`/api/auth/signout`, {
70 | method: "post",
71 | headers: {
72 | "Content-Type": "application/x-www-form-urlencoded",
73 | "X-Auth-Return-Redirect": "1",
74 | },
75 | body: new URLSearchParams({
76 | csrfToken,
77 | callbackUrl,
78 | }),
79 | });
80 | const data = await res.json();
81 |
82 | const url = data.url ?? data.redirect ?? callbackUrl;
83 | window.location.href = url;
84 | // If url contains a hash, the browser does not reload the page. We reload manually
85 | if (url.includes("#")) window.location.reload();
86 | }
87 |
--------------------------------------------------------------------------------
/src/auth/options.ts:
--------------------------------------------------------------------------------
1 | import GithubProvider from "@auth/core/providers/github";
2 | import GoogleProvider from "@auth/core/providers/google";
3 | import { KyselyAdapter } from "~/auth/adapters/kysely";
4 | import { db } from "~/lib/kysely-db";
5 | import { SolidAuthConfig } from "./server";
6 |
7 | export const authConfig: SolidAuthConfig = {
8 | // Configure one or more authentication providers
9 | adapter: KyselyAdapter(db),
10 | providers: [
11 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
12 | // @ts-ignore growing pains
13 | GithubProvider({
14 | clientId: process.env.GITHUB_ID as string,
15 | clientSecret: process.env.GITHUB_SECRET as string,
16 | }),
17 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
18 | // @ts-ignore growing pains
19 | GoogleProvider({
20 | clientId: process.env.GOOGLE_CLIENT_ID as string,
21 | clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
22 | }),
23 | ],
24 | callbacks: {
25 | session({ session, user }) {
26 | if (session.user) {
27 | session.user.id = user.id;
28 | }
29 | return session;
30 | },
31 | },
32 | session: {
33 | strategy: "database",
34 | },
35 | };
36 |
--------------------------------------------------------------------------------
/src/auth/server/index.ts:
--------------------------------------------------------------------------------
1 | /** https://github.com/nextauthjs/next-auth/blob/04791cd57478b64d0ebdfc8fe25779e2f89e2070/packages/frameworks-solid-start/src/index.ts#L1 */
2 |
3 | import { Auth } from "@auth/core";
4 | import type { AuthAction, AuthConfig, Session } from "@auth/core/types";
5 | import { serialize } from "cookie";
6 | import { parseString, splitCookiesString, type Cookie } from "set-cookie-parser";
7 |
8 | export interface SolidAuthConfig extends AuthConfig {
9 | /**
10 | * Defines the base path for the auth routes.
11 | * @default '/api/auth'
12 | */
13 | prefix?: string;
14 | }
15 |
16 | const actions: AuthAction[] = [
17 | "providers",
18 | "session",
19 | "csrf",
20 | "signin",
21 | "signout",
22 | "callback",
23 | "verify-request",
24 | "error",
25 | ];
26 |
27 | // currently multiple cookies are not supported, so we keep the next-auth.pkce.code_verifier cookie for now:
28 | // because it gets updated anyways
29 | // src: https://github.com/solidjs/solid-start/issues/293
30 | const getSetCookieCallback = (cook?: string | null): Cookie | undefined => {
31 | if (!cook) return;
32 | const splitCookie = splitCookiesString(cook);
33 | for (const cookName of [
34 | "__Secure-next-auth.session-token",
35 | "next-auth.session-token",
36 | "next-auth.pkce.code_verifier",
37 | "__Secure-next-auth.pkce.code_verifier",
38 | ]) {
39 | const temp = splitCookie.find((e) => e.startsWith(`${cookName}=`));
40 | if (temp) {
41 | return parseString(temp);
42 | }
43 | }
44 | return parseString(splitCookie?.[0] ?? ""); // just return the first cookie if no session token is found
45 | };
46 |
47 | export async function SolidAuthHandler(request: Request, prefix: string, authOptions: SolidAuthConfig) {
48 | const url = new URL(request.url);
49 | const action = url.pathname.slice(prefix.length + 1).split("/")[0] as AuthAction;
50 |
51 | if (!actions.includes(action) || !url.pathname.startsWith(prefix + "/")) {
52 | return;
53 | }
54 |
55 | const res = await Auth(request, authOptions);
56 | if (["callback", "signin", "signout"].includes(action)) {
57 | const parsedCookie = getSetCookieCallback(res.clone().headers.get("Set-Cookie"));
58 | if (parsedCookie) {
59 | res.headers.set("Set-Cookie", serialize(parsedCookie.name, parsedCookie.value, parsedCookie as any));
60 | }
61 | }
62 | return res;
63 | }
64 |
65 | export async function getSession(req: Request, options: AuthConfig): Promise {children} {siteConfig.description}
19 |
30 |
31 | );
32 |
33 | const GithubIcon: FC{title}
29 |
45 |
46 |
77 | );
78 | };
79 |
--------------------------------------------------------------------------------
/src/components/main-nav/main-nav.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from "react";
2 | import { rsc } from "../../shared/server-rsc/trpc";
3 | import { MainNavInner } from "./main-nav-inner";
4 |
5 | /* @ts-expect-error Async Server Component */
6 | export const MainNav: FC = async () => {
7 | const user = rsc.whoami.fetch();
8 |
9 | return
56 |
71 | {siteConfig.name}
63 |
135 |
257 |
258 | );
259 | };
260 |
--------------------------------------------------------------------------------
/src/components/sign-in-options.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FC } from "react";
4 | import { signIn } from "~/auth/client";
5 | import { GithubIcon, GoogleIcon } from "./icons";
6 | import { Button } from "./ui/button";
7 |
8 | const SignInButtons: FC = () => {
9 | return (
10 |
136 |
190 |
191 |
192 |
193 | {/* pagination */}
194 |
137 |
189 |
138 |
188 |
139 |
140 | {table.getHeaderGroups().map((headerGroup) => (
141 |
187 |
142 | {headerGroup.headers.map((header) => {
143 | return (
144 |
161 | ))}
162 |
163 |
164 | {table.getRowModel().rows.map((row) => {
165 | return (
166 |
150 |
158 | );
159 | })}
160 |
151 | {header.isPlaceholder ? null : (
152 |
157 |
153 | {flexRender(header.column.columnDef.header, header.getContext())}
154 |
155 | )}
156 |
167 | {row.getVisibleCells().map((cell) => {
168 | return (
169 |
183 | );
184 | })}
185 |
186 |
170 |
177 | {flexRender(cell.column.columnDef.cell, cell.getContext())}
178 |
179 |
180 | );
181 | })}
182 |
195 | {/* simplified mobile version */}
196 |
256 |
197 |
206 |
207 | {/* enhanced desktop version */}
208 |
198 |
201 |
202 |
205 |
209 |
255 |
210 |
211 | Page {table.getState().pagination.pageIndex + 1} of{" "}
212 | {table.getPageCount()}
213 |
214 |
234 |
235 |
236 |
254 | {dataQuery.isFetching ?
237 |
253 |
11 |
15 |
19 |
20 | );
21 | };
22 |
23 | export default SignInButtons;
24 |
--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ThemeProvider as NextThemesProvider } from "next-themes";
4 | import { ThemeProviderProps } from "next-themes/dist/types";
5 |
6 | /** Wrap next-theme's provider in a client component so that we can use context */
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 | return {children}
15 |
82 |
91 | ));
92 | NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
93 |
94 | const NavigationMenuIndicator = React.forwardRef<
95 | React.ElementRef