Fix refresh token auth bug (#11)

* Fix bug where new session wasn't saved correctly after authenticating via refresh token

* Refactored API to improve DX

* Fix sign out method

* Addressed feedback

* Refactor the API surface area

* Use more strict typing in loader to support type inference

* README updates

* Ensure consistent return type for unauthorized data

* Revert exports

---------

Co-authored-by: Chance Strickland <[email protected]>

Author: Paul Asjes

README.md

@@ -40,7 +40,7 @@ To use the `signOut` method, you'll need to set your app's homepage in your Work
 Certain environment variables are optional and can be used to debug or configure cookie settings.
 
 ```sh
-WORKOS_COOKIE_MAX_AGE='600' # maximum age of the cookie in seconds. Defaults to 31 days
+WORKOS_COOKIE_MAX_AGE='600' # maximum age of the cookie in seconds. Defaults to 400 days
 WORKOS_API_HOSTNAME='api.workos.com' # base WorkOS API URL
 WORKOS_API_HTTPS=true # whether to use HTTPS in API calls
 WORKOS_API_PORT=5173 # port to use for API calls
@@ -50,15 +50,15 @@ WORKOS_API_PORT=5173 # port to use for API calls
 
 ### Callback route
 
-WorkOS requires that you have a callback URL to redirect users back to after they've authenticated. In your Remix app, [create a new route](https://remix.run/docs/en/main/discussion/routes) and add the following:
+AuthKit requires that you have a callback URL to redirect users back to after they've authenticated. In your Remix app, [create a new route](https://remix.run/docs/en/main/discussion/routes) and add the following:
 
 ```ts
 import { authLoader } from '@workos-inc/authkit-remix';
 
 export const loader = authLoader();
 ```
 
-Make sure this route matches the `WORKOS_REDIRECT_URI` variable and the configured redirect URI in your WorkOS dashboard. For instance if your redirect URI is `http://localhost:5173/callback` then you'd put the above code in `/app/routes/callback.ts`.
+Make sure this route matches the `WORKOS_REDIRECT_URI` variable and the configured redirect URI in your WorkOS dashboard. For instance if your redirect URI is `http://localhost:2884/callback` then you'd put the above code in `/app/routes/callback.ts`.
 
 You can also control the pathname the user will be sent to after signing-in by passing a `returnPathname` option to `authLoader` like so:
 
@@ -68,32 +68,46 @@ export const loader = authLoader({ returnPathname: '/dashboard' });
 
 ## Usage
 
-### Get the current user
+### Access authentication data in your Remix application
 
-For pages where you want to display a signed-in and signed-out view, use `withAuth` to retrieve the user profile from WorkOS.
+Use `authkitLoader` to configure AuthKit for your Remix application routes.
 
-```jsx
+```tsx
+import type { LoaderFunctionArgs } from '@remix-run/node';
+import { authkitLoader } from '@workos-inc/authkit-remix';
+
+export const loader = (args: LoaderFunctionArgs) => authkitLoader(args);
+
+export function App() {
+  return (
+    <div>
+      <p>Welcome back {user?.firstName && `, ${user?.firstName}`}</p>
+    </div>
+  );
+}
+```
+
+For pages where you want to display a signed-in and signed-out view, use `authkitLoader` to retrieve the user profile from WorkOS. You can pass in additional data by providing a loader function directly to `authkitLoader`.
+
+```tsx
 import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { Link, useLoaderData, json, Form } from '@remix-run/react';
-import { getSignInUrl, getSignUpUrl, withAuth, signOut } from '@workos-inc/authkit-remix';
-
-export async function loader({request}: LoaderFunctionArgs) {
-  // additional properties include: sessionId, organizationId, role, impersonator, accessToken
-  const {user} = await withAuth(request);
+import { getSignInUrl, getSignUpUrl, signOut, authkitLoader } from '@workos-inc/authkit-remix';
 
+export const loader = (args: LoaderFunctionArgs) => authkitLoader(args, async ({ request, auth }) => {
   return json({
-    signInUrl: await getSignInUrl(),
-    signUpUrl: await getSignUpUrl(),
-    user,
+    signInUrl: await getSignInUrl();
+    signUpUrl: await getSignUpUrl();
   });
-}
+});
 
 export async function action({ request }: ActionFunctionArgs) {
   return await signOut(request);
 }
 
 export default function HomePage() {
   // Retrieves the user from the session or returns `null` if no user is signed in
+  // Other supported values include sessionId, accessToken, organizationId, role, permissions and impersonator
   const { user, signInUrl, signUpUrl } = useLoaderData<typeof loader>();
 
   if (!user) {
@@ -119,8 +133,8 @@ export default function HomePage() {
 
 For pages where a signed-in user is mandatory, you can use the `ensureSignedIn` option:
 
-```jsx
-const { user } = await withAuth(request, { ensureSignedIn: true });
+```tsx
+export const loader = (args: LoaderFunctionArgs) => authkitLoader(args, { ensureSignedIn: true });
 ```
 
 Enabling `ensureSignedIn` will redirect users to AuthKit if they attempt to access the page without being authenticated.
@@ -133,45 +147,51 @@ Use the `signOut` method to sign out the current logged in user, end the session
 
 Sometimes it is useful to obtain the access token directly, for instance to make API requests to another service.
 
-```jsx
+```tsx
 import type { LoaderFunctionArgs, json } from '@remix-run/node';
 import { withAuth } from '@workos-inc/authkit-remix';
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  const { accessToken } = await withAuth(request);
+export const loader = (args: LoaderFunctionArgs) =>
+  authkitLoader(args, async ({ auth }) => {
+    const { accessToken } = auth;
 
-  if (!accesstoken) {
-    // Not signed in
-  }
+    if (!accessToken) {
+      // Not signed in
+    }
 
-  const serviceData = await fetch('/api/path', {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-    },
-  });
+    const serviceData = await fetch('/api/path', {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
 
-  return json({
-    data: serviceData,
+    return json({
+      data: serviceData,
+    });
   });
-}
 ```
 
 ### Debugging
 
-To enable debug logs, pass in the debug flag when using `withAuth`.
+To enable debug logs, pass in the debug flag when using `authkitLoader`.
 
-```js
-import { withAuth, getSignInUrl, getSignUpUrl } from '@workos-inc/authkit-remix';
+```ts
+import { authkitLoader } from '@workos-inc/authkit-remix';
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  const { user } = await withAuth(request, {
-    debug: true,
-  });
+export const loader = (args: LoaderFunctionArgs) => authkitLoader(args, { debug: true });
+```
 
-  return json({
-    signInUrl: await getSignInUrl(),
-    signUpUrl: await getSignUpUrl(),
-    user,
-  });
-}
+If providing a loader function, you can pass the options object as the third parameter
+
+```ts
+import { authkitLoader } from '@workos-inc/authkit-remix';
+
+export const loader = (args: LoaderFunctionArgs) =>
+  authkitLoader(
+    args,
+    async ({ auth }) => {
+      return json({ foo: 'bar' });
+    },
+    { debug: true },
+  );
 ```

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@workos-inc/authkit-remix",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Authentication and session helpers for using WorkOS & AuthKit with Remix",
   "sideEffects": false,
   "type": "commonjs",

package.json

@@ -36,6 +36,7 @@ export function authLoader(options: HandleAuthOptions = {}) {
           refreshToken,
           user,
           impersonator,
+          headers: {},
         });
 
         const session = await getSession(cookieName);

src/authkit-callback-route.ts

@@ -1,5 +1,5 @@
 import { authLoader } from './authkit-callback-route.js';
-import { withAuth } from './session.js';
+import { authkitLoader } from './session.js';
 import { getSignInUrl, getSignUpUrl, signOut } from './auth.js';
 
 export {
@@ -9,5 +9,5 @@ export {
   getSignUpUrl,
   signOut,
   //
-  withAuth,
+  authkitLoader,
 };

src/index.ts

@@ -8,28 +8,13 @@ export interface Impersonator {
   email: string;
   reason: string | null;
 }
+
 export interface Session {
   accessToken: string;
   refreshToken: string;
   user: User;
   impersonator?: Impersonator;
-}
-
-export interface UserInfo {
-  user: User;
-  sessionId: string;
-  organizationId?: string;
-  role?: string;
-  permissions?: string[];
-  impersonator?: Impersonator;
-  accessToken: string;
-}
-export interface NoUserInfo {
-  user: null;
-  sessionId?: undefined;
-  organizationId?: undefined;
-  role?: undefined;
-  impersonator?: undefined;
+  headers: Record<string, string>;
 }
 
 export interface AccessToken {
@@ -44,12 +29,27 @@ export interface GetAuthURLOptions {
   returnPathname?: string;
 }
 
-export interface AuthkitMiddlewareAuth {
-  enabled: boolean;
-  unauthenticatedPaths: string[];
+export interface AuthKitLoaderOptions {
+  ensureSignedIn?: boolean;
+  debug?: boolean;
 }
 
-export interface AuthkitMiddlewareOptions {
-  debug?: boolean;
-  middlewareAuth?: AuthkitMiddlewareAuth;
+export interface AuthorizedData {
+  user: User;
+  sessionId: string;
+  accessToken: string;
+  organizationId: string | null;
+  role: string | null;
+  permissions: string[];
+  impersonator: Impersonator | null;
+}
+
+export interface UnauthorizedData {
+  user: null;
+  sessionId: null;
+  accessToken: null;
+  organizationId: null;
+  role: null;
+  permissions: null;
+  impersonator: null;
 }