@solid-auth/client NPM

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/client

Creating 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); // magic

Wrapping 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;

solidjs typewriter

@infinitebrahmanuniverse/nolb-_sol @everything-registry/sub-chunk-851 @zalastax/nolb-_sol

0.0.1

1 year ago