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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions