fix: remix oauth

.changeset/serious-boats-vanish.md

@@ -0,0 +1,5 @@
+---
+'@supabase/auth-helpers-remix': patch
+---
+
+fix: export types.

examples/remix/app/root.tsx

@@ -1,6 +1,7 @@
 import {
   ActionFunction,
   json,
+  redirect,
   LoaderFunction,
   MetaFunction
 } from '@remix-run/node';
@@ -100,6 +101,28 @@ export const action: ActionFunction = async ({
     );
   }
 
+  // GitHub OAuth
+  if (_action === 'github') {
+    const { error, data } = await supabaseClient.auth.signInWithOAuth({
+      provider: 'github',
+      options: { scopes: 'repo', redirectTo: 'http://localhost:3004' }
+    });
+
+    // in order for the set-cookie header to be set,
+    // headers must be returned as part of the loader response
+    if (error)
+      return json(
+        { error },
+        {
+          headers: response.headers
+        }
+      );
+
+    return redirect(data.url, {
+      headers: response.headers
+    });
+  }
+
   if (_action === 'logout') {
     let { error } = await supabaseClient.auth.signOut();
 
@@ -130,20 +153,14 @@ export default function App() {
         <Form method="post">
           <div>
             <label htmlFor="registerEmail">Email:</label>
-            <input
-              type="text"
-              id="registerEmail"
-              name="registerEmail"
-              defaultValue="jon@supabase.com"
-            />
+            <input type="text" id="registerEmail" name="registerEmail" />
           </div>
           <div>
             <label htmlFor="registerPassword">Password:</label>
             <input
               type="password"
               id="registerPassword"
               name="registerPassword"
-              defaultValue="very-secur3-password"
             />
           </div>
           <button type="submit" name="_action" value="register">
@@ -154,27 +171,23 @@ export default function App() {
         <Form method="post">
           <div>
             <label htmlFor="loginEmail">Email:</label>
-            <input
-              type="text"
-              id="loginEmail"
-              name="loginEmail"
-              defaultValue="jon@supabase.com"
-            />
+            <input type="text" id="loginEmail" name="loginEmail" />
           </div>
           <div>
             <label htmlFor="loginPassword">Password:</label>
-            <input
-              type="password"
-              id="loginPassword"
-              name="loginPassword"
-              defaultValue="very-secur3-password"
-            />
+            <input type="password" id="loginPassword" name="loginPassword" />
           </div>
           <button type="submit" name="_action" value="login">
             Login
           </button>
         </Form>
         <hr />
+        <Form method="post">
+          <button type="submit" name="_action" value="github">
+            GitHub Oauth
+          </button>
+        </Form>
+        <hr />
         <Form method="post">
           <button type="submit" name="_action" value="logout">
             Logout

examples/remix/app/routes/github-provider-token.tsx

@@ -0,0 +1,69 @@
+import { json, LoaderFunction, redirect } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import { createServerClient, User } from '@supabase/auth-helpers-remix';
+import { Database } from '../../db_types';
+
+export const loader: LoaderFunction = async ({
+  request
+}: {
+  request: Request;
+}) => {
+  const response = new Response();
+
+  const supabaseClient = createServerClient<Database>(
+    process.env.SUPABASE_URL!,
+    process.env.SUPABASE_ANON_KEY!,
+    { request, response }
+  );
+
+  const {
+    data: { session }
+  } = await supabaseClient.auth.getSession();
+
+  if (!session) {
+    // there is no session, therefore, we are redirecting
+    // to the landing page. we still need to return
+    // response.headers to attach the set-cookie header
+    return redirect('/', {
+      headers: response.headers
+    });
+  }
+
+  // Retrieve provider_token & logged in user's third-party id from metadata
+  const { provider_token, user } = session;
+  const userId = user.user_metadata.user_name;
+
+  const allRepos = await (
+    await fetch(`https://api.github.com/search/repositories?q=user:${userId}`, {
+      method: 'GET',
+      headers: {
+        Authorization: `token ${provider_token}`
+      }
+    })
+  ).json();
+
+  // in order for the set-cookie header to be set,
+  // headers must be returned as part of the loader response
+  return json(
+    { user, allRepos },
+    {
+      headers: response.headers
+    }
+  );
+};
+
+export default function ProtectedPage() {
+  // by fetching the user in the loader, we ensure it is available
+  // for first SSR render - no flashing of incorrect state
+  const { user, allRepos } = useLoaderData<{ user: User; allRepos: any }>();
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
+      <div>Protected content for {user.email}</div>
+      <p>Data fetched with provider token:</p>
+      <pre>{JSON.stringify(allRepos, null, 2)}</pre>
+      <p>user:</p>
+      <pre>{JSON.stringify(user, null, 2)}</pre>
+    </div>
+  );
+}

examples/remix/app/routes/index.tsx

@@ -1,42 +1,24 @@
-import { json, LoaderFunction } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
-import { createServerClient } from '@supabase/auth-helpers-remix';
+import { useEffect, useState } from 'react';
+import { createBrowserClient, Session } from '@supabase/auth-helpers-remix';
 import { Database } from '../../db_types';
 
-// this route demonstrates a simple server-side authenticated supabase query
-export const loader: LoaderFunction = async ({
-  request
-}: {
-  request: Request;
-}) => {
-  const response = new Response();
-  const supabaseClient = createServerClient<Database>(
-    process.env.SUPABASE_URL!,
-    process.env.SUPABASE_ANON_KEY!,
-    { request, response }
-  );
-  const { data, error } = await supabaseClient.from('test').select('*');
+export default function Index() {
+  const [session, setSession] = useState<Session | null>(null);
 
-  if (error) {
-    throw error;
-  }
+  useEffect(() => {
+    const supabaseClient = createBrowserClient<Database>(
+      window.env.SUPABASE_URL,
+      window.env.SUPABASE_ANON_KEY
+    );
 
-  // in order for the set-cookie header to be set,
-  // headers must be returned as part of the loader response
-  return json(
-    { data },
-    {
-      headers: response.headers
-    }
-  );
-};
-
-export default function Index() {
-  const { data } = useLoaderData();
+    supabaseClient.auth
+      .getSession()
+      .then(({ data: { session } }) => setSession(session));
+  }, []);
 
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <pre>{JSON.stringify({ session }, null, 2)}</pre>
     </div>
   );
 }

examples/remix/package.json

@@ -4,8 +4,8 @@
   "sideEffects": false,
   "scripts": {
     "build:example": "remix build",
-    "dev": "remix dev",
-    "start": "remix-serve build"
+    "dev": "PORT=3004 remix dev",
+    "start": "PORT=3004 remix-serve build"
   },
   "dependencies": {
     "@remix-run/node": "^1.7.3",

packages/remix/package.json

@@ -44,5 +44,8 @@
   },
   "dependencies": {
     "@supabase/auth-helpers-shared": "workspace:*"
+  },
+  "peerDependencies": {
+    "@supabase/supabase-js": "^2.0.4"
   }
 }

packages/remix/src/constants.ts

@@ -1,2 +1,2 @@
 export const PKG_NAME = "@supabase/auth-helpers-remix";
-export const PKG_VERSION = "0.1.0";
+export const PKG_VERSION = "0.1.1";

packages/remix/src/index.ts

@@ -4,3 +4,6 @@ export {
   createServerClient
 } from './utils/createSupabaseClient';
 export { default as logger } from './utils/log';
+
+// Types
+export type { Session, User, SupabaseClient } from '@supabase/supabase-js';