Skip to content

Typescript: Custom SessionData and FlashData breaks type checking for authkitLoader #61

@mnemitz

Description

@mnemitz

When creating a sessionStorage with custom data types:

type MySessionData = {
  customField?: string
}

type MySessionFlashData = {
  someFlashField?: string
}

const sessionStorage = createMemorySessionStorage<MySessionData, MySessionFlashData>({
  cookie: createCookie("__session", {
    sameSite: "lax",
    secure: true,
    httpOnly: true,
    secrets: ["foo", "bar"],
  }),
});

I define a getAuthStorage function as per the README

export function getAuthStorage() {
  return {
    storage: sessionStorage
    cookie: { name: "cookie-name" },
  };
}

Since Typescript 5.6, the following does not hold, which means it cannot be passed to authkitLoader:

getAuthStorage().storage satisfies AuthKitLoaderOptions["storage"]
/*
error TS1360: Type 'SessionStorage<MySessionData, MySessionFlashData>' does not satisfy the expected type 'SessionStorage<SessionData, SessionData>'.
  The types returned by 'getSession(...)' are incompatible between these types.
    Type 'Promise<Session<MySessionData, MySessionFlashData>>' is not assignable to type 'Promise<Session<SessionData, SessionData>>'.
*/

Workaround is to cast the type in getAuthStorage like so:

import type { SessionStorage } from "react-router";

export function getAuthStorage() {
  return {
    storage: sessionStorage as SessionStorage,
    cookie: { name: "cookie-name" },
  };
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions