@solid-auth/client
v0.0.1
Published
Client Adapter For SOlid Auth
Downloads
1
Readme
Solid Auth
This is a solid client adapter for solid-auth, this will allow you to access the current logged in user in from client side.
Installation
npm install @solid-auth/clientCreating A Client
// utils/auth.ts
import { createSolidAuthClient } from "@solid-auth/core";
import { adaptAuthClient } from "@solid-auth/client";
import { sessionStorage } from "./auth"; // where your cookie session storage is located
type MyUser = {...}
const baseURL = "https://example.com";
export const authClient = createSolidAuthClient(baseURL);
export const adpAuthClient = adaptAuthClient<MyUser>(authClient, sessionStorage); // magicWrapping Your App
// root.tsx
import { adpAuthClient } from "./utils/auth";
{...}
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>
{/* the provider of the auth */}
<adpAuthClient.Provider>
<Suspense>
<ErrorBoundary>
<Routes>
<FileRoutes />
</Routes>
</ErrorBoundary>
</Suspense>
</adpAuthClient.Provider>
<Scripts />
</Body>
</Html>
);
}Using the session
//components/NavBar.tsx
import { Show, type Component } from "solid-js";
import { adpAuthClient } from "~/utils/auth";
const NavBar: Component = () => {
const session = adpAuthClient.useSession();
return (
<nav class="w-full h-12 px-12 bg-slate-300 flex gap-2 items-center">
<Show
when={session().user}
keyed
fallback={<p class="font-bold text-lg text-gray-500">Not Logged In</p>}
>
{(user) => (
<>
<Show when={user.avatar} keyed>
{(avatar) => <img src={avatar} class="w-10 h-10 rounded-full" />}
</Show>
<p class="text-white text-lg font-bold">{user.displayName}</p>
</>
)}
</Show>
</nav>
);
};
export default NavBar;