basic setup untill auth

Nipsuli · Apr 6, 2022 · 06b4bfc · 06b4bfc
1 parent a8530d4
commit 06b4bfc
Show file tree

Hide file tree

Showing 22 changed files with 20,205 additions and 0 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,4 @@
+SUPABASE_SERVICE_KEY=<read from supabase start>
+PUBLIC_SUPABASE_ANON_KEY=<read from supabase start>
+SUPABASE_URL=http://localhost:54321
+SERVER_URL=http://localhost:8788
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["@remix-run/eslint-config"]
+}
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+16.7.0
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+.node-version
diff --git a/app/custom-types.d.ts b/app/custom-types.d.ts
@@ -0,0 +1,11 @@
+import '@remix-run/cloudflare'
+
+// these map with the fields in .env
+declare module '@remix-run/cloudflare' {
+  interface AppLoadContext {
+    SERVER_URL: string;
+    SUPABASE_URL: string;
+    SUPABASE_SERVICE_KEY: string;
+    PUBLIC_SUPABASE_ANON_KEY: string;
+  }
+}
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
+
+hydrate(<RemixBrowser />, document);
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -0,0 +1,22 @@
+import type { EntryContext } from "@remix-run/cloudflare";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+import { injectStylesIntoStaticMarkup } from '@mantine/ssr';
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response(`<!DOCTYPE html>${injectStylesIntoStaticMarkup(markup)}`, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -0,0 +1,77 @@
+import type { LoaderFunction, MetaFunction } from "@remix-run/cloudflare";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch,
+  useLoaderData,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export const loader: LoaderFunction = ({ context }) => {
+  if (!context.SUPABASE_URL)
+    throw new Error('SUPABASE_URL is required')
+
+  if (!context.PUBLIC_SUPABASE_ANON_KEY)
+    throw new Error('PUBLIC_SUPABASE_ANON_KEY is required')
+
+  return {
+    env: {
+      SUPABASE_URL: context.SUPABASE_URL,
+      PUBLIC_SUPABASE_ANON_KEY: context.PUBLIC_SUPABASE_ANON_KEY,
+    },
+  }
+}
+
+export default function App() {
+  const { env } = useLoaderData<Window>();
+
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.env = ${JSON.stringify(
+              env,
+            )}`,
+          }}
+        />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+export function CatchBoundary() {
+  const caught = useCatch();
+  return (
+    <html>
+      <head>
+        <title>Oops!</title>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <h1>
+          {caught.status} {caught.statusText}
+        </h1>
+        <Scripts />
+      </body>
+    </html>
+  );
+}
diff --git a/app/routes/__auth/auth.css b/app/routes/__auth/auth.css
@@ -0,0 +1,14 @@
+body {
+  background-color: #181818;
+  min-height: 100%;
+  overflow: auto;
+}
+
+.auth-box {
+  max-width: 25em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
diff --git a/app/routes/__auth/signin.tsx b/app/routes/__auth/signin.tsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+import { Auth } from "@supabase/ui";
+import { supabase } from "~/supabase.client";
+import styles from "~/routes/__auth/auth.css"
+
+export const links = () => {
+  // using tailwind only in signin with supabase
+  return [
+    {
+      rel: "stylesheet",
+      href: "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css",
+    },
+    {
+      rel: "stylesheet",
+      href: styles
+    }
+  ];
+};
+
+const Index = () => {
+  const [isClient, setIsclient] = useState(false);
+  useEffect(() => setIsclient(true), []);
+
+  if (isClient) {
+    return (
+      <Auth
+        className="dark auth-box"
+        providers={["google"]}
+        supabaseClient={supabase()}
+        magicLink={true}
+        view={"magic_link"}
+      />
+    );
+  }
+  return "";
+};
+
+export default Index;
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -0,0 +1,6 @@
+
+const Index = () => {
+  return <h1>Hello</h1>
+}
+
+export default Index;
diff --git a/app/supabase.client.ts b/app/supabase.client.ts
@@ -0,0 +1,37 @@
+import { createClient } from '@supabase/supabase-js'
+export { SupabaseClient } from '@supabase/supabase-js'
+
+declare global {
+  interface Window {
+    env: {
+      SUPABASE_URL: string
+      PUBLIC_SUPABASE_ANON_KEY: string
+    }
+  }
+}
+
+export const supabase = () => {
+  if (!window.env.SUPABASE_URL)
+    throw new Error('SUPABASE_URL is required')
+
+  if (!window.env.PUBLIC_SUPABASE_ANON_KEY)
+    throw new Error('PUBLIC_SUPABASE_ANON_KEY is required')
+
+  // Supabase options example (build your own :))
+  // https://supabase.com/docs/reference/javascript/initializing#with-additional-parameters
+
+  const supabaseOptions = {
+    fetch: fetch.bind(globalThis), // see ⚠️ cloudflare
+    schema: "public",
+    persistSession: false,
+    autoRefreshToken: true,
+    detectSessionInUrl: true
+  };
+  // ⚠️ cloudflare needs you define fetch option : https://github.com/supabase/supabase-js#custom-fetch-implementation
+  // Use Remix fetch polyfill for node (See https://remix.run/docs/en/v1/other-api/node)
+  return createClient(
+    window.env.SUPABASE_URL,
+    window.env.PUBLIC_SUPABASE_ANON_KEY,
+    supabaseOptions
+  )
+}
diff --git a/app/supabase.server.ts b/app/supabase.server.ts
@@ -0,0 +1,25 @@
+import { createClient } from '@supabase/supabase-js'
+import type { ApiError, Session } from '@supabase/supabase-js'
+import { AppLoadContext } from '@remix-run/cloudflare'
+
+export const supabaseAdmin = (context: AppLoadContext) => {
+  if (!context.SUPABASE_URL)
+    throw new Error('ENV: SUPABASE_URL is required')
+
+  if (!context.SUPABASE_SERVICE_KEY)
+    throw new Error('ENV: SUPABASE_SERVICE_KEY is required')
+
+  const supabaseOptions = {
+    fetch: fetch.bind(globalThis), // see ⚠️ cloudflare
+    schema: "public",
+    autoRefreshToken: true,
+  };
+
+  createClient(
+    context.SUPABASE_URL,
+    context.SUPABASE_SERVICE_KEY,
+    supabaseOptions
+  )
+}
+
+export { Session, ApiError }