Move oauthTokens out of Session and make available via authLoader (#33)

* Run `npm i` and commit new package version in lockfile

* Add `onSuccess` param for side-effects when using `authLoader`

* Remove `oauthTokens` from session data and interfaces

* Remove mention of `oauthTokens` in README

* Remove mention of `oauthTokens` in comment

* Add to `options` object instead of a new parameter

* Add example to README

Author: mthadley

README.md

@@ -66,6 +66,16 @@ You can also control the pathname the user will be sent to after signing-in by p
 export const loader = authLoader({ returnPathname: '/dashboard' });
 ```
 
+If your application needs to persist `oauthTokens` or other auth-related information after the callback is successful, you can pass an `onSuccess` option:
+
+```ts
+export const loader = authLoader({
+  onSuccess: async ({ oauthTokens }) => {
+    await saveToDatabase(oauthTokens);
+  },
+});
+```
+
 ## Usage
 
 ### Access authentication data in your Remix application
@@ -80,10 +90,9 @@ import { authkitLoader } from '@workos-inc/authkit-remix';
 export const loader = (args: LoaderFunctionArgs) => authkitLoader(args);
 
 export function App() {
-
   // Retrieves the user from the session or returns `null` if no user is signed in
-  // Other supported values include sessionId, accessToken, organizationId,
-  // role, permissions, entitlements, impersonator and oauthTokens
+  // Other supported values include `sessionId`, `accessToken`, `organizationId`,
+  // `role`, `permissions`, `entitlements`, and `impersonator`.
   const { user, signInUrl, signUpUrl } = useLoaderData<typeof loader>();
 
   return (
@@ -115,7 +124,6 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export default function HomePage() {
-
   const { user, signInUrl, signUpUrl } = useLoaderData<typeof loader>();
 
   if (!user) {

package-lock.json

@@ -7,7 +7,7 @@ import { redirect, json, LoaderFunctionArgs } from '@remix-run/node';
 
 export function authLoader(options: HandleAuthOptions = {}) {
   return async function loader({ request }: LoaderFunctionArgs) {
-    const { returnPathname: returnPathnameOption = '/' } = options;
+    const { returnPathname: returnPathnameOption = '/', onSuccess } = options;
 
     const url = new URL(request.url);
 
@@ -17,10 +17,11 @@ export function authLoader(options: HandleAuthOptions = {}) {
 
     if (code) {
       try {
-        const { accessToken, refreshToken, user, impersonator, oauthTokens } = await workos.userManagement.authenticateWithCode({
-          clientId: WORKOS_CLIENT_ID,
-          code,
-        });
+        const { accessToken, refreshToken, user, impersonator, oauthTokens } =
+          await workos.userManagement.authenticateWithCode({
+            clientId: WORKOS_CLIENT_ID,
+            code,
+          });
 
         // Clean up params
         url.searchParams.delete('code');
@@ -41,14 +42,14 @@ export function authLoader(options: HandleAuthOptions = {}) {
           url.pathname = returnPathname;
         }
 
-        // The refreshToken and oauthTokens should never be accesible publicly, hence why we encrypt it in the cookie session
-        // Alternatively you could persist the refresh token in a backend database
+        // The refreshToken should never be accesible publicly, hence why we encrypt it
+        // in the cookie session. Alternatively you could persist the refresh token in a
+        // backend database.
         const encryptedSession = await encryptSession({
           accessToken,
           refreshToken,
           user,
           impersonator,
-          oauthTokens,
           headers: {},
         });
 
@@ -57,6 +58,16 @@ export function authLoader(options: HandleAuthOptions = {}) {
         session.set('jwt', encryptedSession);
         const cookie = await commitSession(session);
 
+        if (onSuccess) {
+          await onSuccess({
+            accessToken,
+            impersonator: impersonator ?? null,
+            oauthTokens: oauthTokens ?? null,
+            refreshToken,
+            user,
+          });
+        }
+
         return redirect(url.toString(), {
           headers: {
             'Set-Cookie': cookie,

src/authkit-callback-route.ts

@@ -2,6 +2,15 @@ import { OauthTokens, User } from '@workos-inc/node';
 
 export interface HandleAuthOptions {
   returnPathname?: string;
+  onSuccess?: (data: AuthLoaderSuccessData) => void | Promise<void>;
+}
+
+export interface AuthLoaderSuccessData {
+  accessToken: string;
+  impersonator: Impersonator | null;
+  oauthTokens: OauthTokens | null;
+  refreshToken: string;
+  user: User;
 }
 
 export interface Impersonator {
@@ -14,7 +23,6 @@ export interface Session {
   refreshToken: string;
   user: User;
   impersonator?: Impersonator;
-  oauthTokens?: OauthTokens;
   headers: Record<string, string>;
 }
 
@@ -45,7 +53,6 @@ export interface AuthorizedData {
   permissions: string[];
   entitlements: string[];
   impersonator: Impersonator | null;
-  oauthTokens: OauthTokens | null;
   sealedSession: string;
 }
 
@@ -58,6 +65,5 @@ export interface UnauthorizedData {
   permissions: null;
   entitlements: null;
   impersonator: null;
-  oauthTokens: null;
   sealedSession: null;
 }

src/interfaces.ts

@@ -42,7 +42,6 @@ async function updateSession(request: Request, debug: boolean) {
       refreshToken,
       user: session.user,
       impersonator: session.impersonator,
-      oauthTokens: session.oauthTokens,
       headers: {},
     };
 
@@ -130,7 +129,6 @@ async function authkitLoader<Data = unknown>(
       user: null,
       accessToken: null,
       impersonator: null,
-      oauthTokens: null,
       organizationId: null,
       permissions: null,
       entitlements: null,
@@ -161,7 +159,6 @@ async function authkitLoader<Data = unknown>(
     permissions,
     entitlements,
     impersonator: session.impersonator ?? null,
-    oauthTokens: session.oauthTokens ?? null,
     sealedSession: cookieSession.get('jwt'),
   };