@solid-auth/base v2.0.3
Getting started
Recommended to use create-jd-app
npm install @solid-auth/base@latest @auth/core@latestSetting It Up
Generate auth secret, then set it as an environment variable:
AUTH_SECRET=your_auth_secretOn Production
Don't forget to trust the host.
AUTH_TRUST_HOST=trueCreating the api handler
in this example we are using github so make sure to set the following environment variables:
GITHUB_ID=your_github_oauth_id
GITHUB_SECRET=your_github_oauth_secret// routes/api/auth/[...solidauth].ts
import { SolidAuth, type SolidAuthConfig } from "@solid-auth/base";
import GitHub from "@auth/core/providers/github";
export const authOpts: SolidAuthConfig = {
providers: [
GitHub({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
debug: false,
};
export const { GET, POST } = SolidAuth(authOpts);Sign In
The signIn is a function that can be used from the client side, it can take two paramaters, the first is provider, this is an optional paramater and not passing it will redirect the user to the login page defined in the config, the second is options and this can be used to tell SolidAuth where should we redirect (if needed ofc).
import { signIn } from "@solid-auth/base";
signIn(); // login page
signIn("github"); // login with github and redirect to the exact same page we are at right now
signIn("github", { redirectTo: "/ok" }); // login with github and redirect to /okSign Out
The signOut is a function that can be used from the client side, it takes one parameter options, you can choose where should SolidAuth redirect after, or if it should redirect.
import { signOut } from "@solid-auth/base";
signOut(); // redirect to this same page
signOut({ redirectTo: "/ok" }); // redirect to /ok
signOut({ redirect: false }); // don't redirect at allGetting the current session
Client Side
Wrap your Root with SessionProvider
// @refresh reload
import { Suspense } from "solid-js";
import {
Body,
ErrorBoundary,
FileRoutes,
Head,
Html,
Meta,
Routes,
Scripts,
Title,
} from "solid-start";
import { SessionProvider } from "@solid-auth/base/client";
export default function Root() {
return (
<Html lang="en">
<Head>
<Title>Create JD App</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>
<SessionProvider>
<Suspense>
<ErrorBoundary>
<Routes>
<FileRoutes />
</Routes>
</ErrorBoundary>
</Suspense>
</SessionProvider>
<Scripts />
</Body>
</Html>
);
}And then you could use the createSession hook:
import { createSession } from "@solid-auth/base/client";
const session = createSession();
const data = () => session()?.data;
const user = () => data()?.user;Server Side
import { getSession } from "@solid-auth/base";
import { createServerData$ } from "solid-start/server";
import { authOpts } from "~/routes/api/auth/[...solidauth]";
export const useSession = () => {
return createServerData$(
async (_, { request }) => {
return await getSession(request, authOpts);
},
{ key: () => ["auth_user"] }
);
};
// useSession returns a resource:
const session = useSession();
const loading = session.loading;
const user = () => session()?.user;Example Component
import { type VoidComponent } from "solid-js";
import { createSession, signOut, signIn } from "@solid-auth/base/client";
const AuthShowcase: VoidComponent = () => {
const sessionData = createSession();
return (
<div class="flex flex-col items-center justify-center gap-4">
<p class="text-center text-2xl text-white">
{sessionData().status === "authenticated" && (
<span>
Logged in as{" "}
{sessionData().data?.user?.name ?? sessionData().data?.user?.email}
</span>
)}
</p>
<button
class="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
onClick={() => {
if (sessionData().status === "authenticated") {
void signOut();
} else {
void signIn("github");
}
}}
>
{sessionData().status === "authenticated" ? "Sign out" : "Sign in"}
</button>
</div>
);
};