Solid-auth NPM

Solid Auth

npm install solid-auth

Creating Session Storage

// /auth.ts
import { createCookieSessionStorage } from "solid-start";

export const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "_session",
    sameSite: "lax",
    path: "/",
    secrets: ["safajfas9234?Sfds"], // replace this with an actual secret
    secure: true,
  },
});

Creating An Authenticator Client

You can choose any provider you wish, in this examle we are going to use discord and prisma

// server/auth.ts
import { type User } from "@prisma/client"; // any user type you wish
import { prisma } from "./db/client"; // any db you wish
import { sessionStorage } from "~/auth"; // the session storage we created before
import { Authenticator, DiscordStrategy } from "solid-auth";

export const authenticator = new Authenticator<User>(sessionStorage).use(
  new DiscordStrategy(
    {
      clientID: process.env.DISCORD_CLIENT_ID,
      clientSecret: process.env.DISCORD_CLIENT_SECRET,
      callbackURL: process.env.SITE_URL + "/api/auth/discord/callback",
    },
    async ({ profile }) => {
      let user = await prisma.user.findUnique({
        where: {
          id: profile.id,
        },
      });
      if (!user) {
        user = await prisma.user.create({
          data: {
            id: profile.id,
            displayName: profile.__json.username,
            avatar: profile.photos[0].value,
          },
        });
      }
      return user;
    }
  )
);

Creating A Client

// utils/auth.ts
import { createSolidAuthClient } from "solid-auth";
const myURL = "http://localhost:3000";
export const authClient = createSolidAuthClient(`${myURL}/api/auth`);

Creating The API Handler

// routes/api/auth/[...solidauth].ts
import { type User } from "@prisma/client"; // the type of that user
import { authenticator } from "~/server/auth"; // the Authenticator we created before
import { createSolidAuthHandler } from "solid-auth";

const handler = createSolidAuthHandler<User>(authenticator);

export const POST = handler;
export const GET = handler;

Protected Routers

As you know SolidStart routeData is being loaded while rendering the page, therefore the user can access protected content for about few seconds before the page redirects him to the login page, so I had to figure out how to create an actual protected router and here is what i came up with:

import { type User } from "@prisma/client"; // the type of the user
import { Match, Switch, type Component } from "solid-js";
import { useRouteData } from "solid-start";
import { createServerData$, redirect } from "solid-start/server";
import { authenticator } from "~/server/auth"; // where your authenticator is located

export const withProtected = (Component: ProtectedRouter) => {
  const routeData = () => {
    return createServerData$(async (_, { request }) => {
      const user = await authenticator.isAuthenticated(request);
      if (!user) {
        throw redirect("/account");
      }
      return user;
    });
  };
  return {
    routeData,
    Page: () => {
      const current = useRouteData<typeof routeData>();
      return (
        <Switch fallback={<h1>Loading</h1>}>
          {/* if current is response, meaning that the routeData is trying to redirect the user*/}
          <Match when={current() && !(current() instanceof Response)}>
            <Component {...(current() as User)} />
          </Match>
        </Switch>
      );
    },
  };
};

export type ProtectedRouter = Component<User>;

"But this seems complicated" you might say, well it actually isn't, check out how easily it can be used:

import { withProtected } from "../layouts/Protected";

// this will only get mounted when user is logged in
export const { routeData, Page } = withProtected((user) => {
  // user is typesafed, meaning that you don't need to use ?.displayName
  return <h1>Hey {user.displayName}</h1>;
});

// The page will be wrapped in a switch that will handle the dirty for us
export default Page;