Add Auth to Remix create & small fixes (#891)

* Add Sveltekit Readme file & fix typo in other Readmes

* Update yarn create -> yarn run create in Readmes

* Add auth files to Remix template folder.

Update Remix and Sveltekit index pages  with builtin-ui signin.

* Fix typo

* Use TypeScript instead of Typescript

packages/create/README.md

@@ -51,7 +51,7 @@ $ yarn build
 Run a local version:
 
 ```bash
-$ yarn create
+$ yarn run create
 ```
 
 ### Testing

packages/create/src/recipes/express/README.md

@@ -43,7 +43,7 @@ $ yarn build
 Run a local version:
 
 ```bash
-$ yarn create
+$ yarn run create
 ```
 
 Then choose the **"Express"** template.

packages/create/src/recipes/nextjs/README.md

@@ -2,7 +2,7 @@
 
 This recipe provides a starting point for building a [Next.js](https://nextjs.org/) application with EdgeDB as the database. It is based on the official Next.js starter template.
 
-We try to actively monitor and incorporate significant changes from the original "create-app" templates to to ensure developers have access to the latest features and best practices. However, we might not cover every possible configuration or permutation due to the vast scope of possibilities.
+We try to actively monitor and incorporate significant changes from the original "create-app" templates to ensure developers have access to the latest features and best practices. However, we might not cover every possible configuration or permutation due to the vast scope of possibilities.
 
 ✨ Check out the [`@edgedb/create` package](https://github.com/edgedb/edgedb-js/blob/master/packages/create/README.md) for more information.
 
@@ -45,7 +45,7 @@ $ yarn build
 Run a local version:
 
 ```bash
-$ yarn create
+$ yarn run create
 ```
 
 Then choose the **"Next.js"** template.

packages/create/src/recipes/remix/README.md

@@ -2,7 +2,7 @@
 
 This recipe provides a starting point for building a [Remix](https://remix.run/) application with EdgeDB as the database. It is based on the official Remix starter template.
 
-We try to actively monitor and incorporate significant changes from the original "create-app" templates to to ensure developers have access to the latest features and best practices. However, we might not cover every possible configuration or permutation due to the vast scope of possibilities.
+We try to actively monitor and incorporate significant changes from the original "create-app" templates to ensure developers have access to the latest features and best practices. However, we might not cover every possible configuration or permutation due to the vast scope of possibilities.
 
 ✨ Check out the [`@edgedb/create` package](https://github.com/edgedb/edgedb-js/blob/master/packages/create/README.md) for more information.
 
@@ -45,7 +45,7 @@ $ yarn build
 Run a local version:
 
 ```bash
-$ yarn create
+$ yarn run create
 ```
 
 Then choose the **"Remix"** template.

packages/create/src/recipes/remix/index.ts

@@ -15,7 +15,16 @@ const recipe: Recipe = {
     logger("Running remix recipe");
 
     const dirname = path.dirname(new URL(import.meta.url).pathname);
-    await copyTemplateFiles(path.resolve(dirname, "./template"), projectDir);
+
+    let tags;
+
+    if (useEdgeDBAuth) {
+      tags = new Set<string>(["auth"]);
+    }
+
+    await copyTemplateFiles(path.resolve(dirname, "./template"), projectDir, {
+      tags,
+    });
 
     await updatePackage(projectDir, {
       sideEffects: false,
@@ -41,10 +50,15 @@ const recipe: Recipe = {
         "@remix-run/dev": "*",
         "@types/react": "^18.2.20",
         "@types/react-dom": "^18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.7.4",
+        "@typescript-eslint/parser": "^6.7.4",
+        eslint: "^8.38.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.28.1",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        typescript: "^5.1.6",
       },
       engines: {
         node: ">=18.0.0",

packages/create/src/recipes/remix/template/.eslintrc.cjs

@@ -43,6 +43,9 @@ module.exports = {
           { name: "Link", linkAttribute: "to" },
           { name: "NavLink", linkAttribute: "to" },
         ],
+        "import/resolver": {
+          typescript: {},
+        },
       },
     },
 
@@ -71,7 +74,7 @@ module.exports = {
 
     // Node
     {
-      files: [".eslintrc.js"],
+      files: [".eslintrc.cjs"],
       env: {
         node: true,
       },

packages/create/src/recipes/remix/template/app/routes/_index.__auth.tsx

@@ -0,0 +1,78 @@
+import type { MetaFunction, LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import auth, { client } from "~/services/auth.server";
+import clientAuth from "~/services/auth";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const session = auth.getSession(request);
+  const isSignedIn = await session.isSignedIn();
+
+  const builtinUIEnabled = await client.queryRequiredSingle<boolean>(
+    `select exists ext::auth::UIConfig`
+  );
+
+  return json({
+    isSignedIn,
+    builtinUIEnabled,
+  });
+};
+
+export default function Index() {
+  const { isSignedIn, builtinUIEnabled } = useLoaderData<typeof loader>();
+
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to Remix</h1>
+      {isSignedIn ? (
+        <p>
+          You are signed in. <a href={clientAuth.getSignoutUrl()}>Sign Out</a>
+        </p>
+      ) : (
+        <>
+          <p> You are not signed in. </p>
+          <a href={clientAuth.getBuiltinUIUrl()}>Sign In with Builtin UI</a>
+          {!builtinUIEnabled && (
+            <p>
+              In order to signin you need to firstly enable the built-in UI in
+              the auth config.
+            </p>
+          )}
+        </>
+      )}
+
+      <ul>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/blog"
+            rel="noreferrer"
+          >
+            15m Quickstart Blog Tutorial
+          </a>
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/jokes"
+            rel="noreferrer"
+          >
+            Deep Dive Jokes App Tutorial
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
+            Remix Docs
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}

packages/create/src/recipes/remix/template/app/routes/auth.__auth.$.ts

@@ -0,0 +1,24 @@
+import { redirect } from "@remix-run/node";
+import auth from "~/services/auth.server";
+
+export const { loader } = auth.createAuthRouteHandlers({
+  async onBuiltinUICallback({ error, tokenData, isSignUp }) {
+    if (error) {
+      //
+    }
+
+    if (!tokenData) {
+      //
+    }
+
+    if (isSignUp) {
+      //
+    }
+
+    redirect("/");
+  },
+
+  async onSignout() {
+    return redirect("/");
+  },
+});

packages/create/src/recipes/remix/template/app/services.__auth/auth.server.ts

@@ -0,0 +1,12 @@
+import createServerAuth from "@edgedb/auth-remix/server";
+import { createClient } from "edgedb";
+import { options } from "./auth";
+
+export const client = createClient({
+  //Note: when developing locally you will need to set tls  security to insecure, because the dev server uses  self-signed certificates which will cause api calls with the fetch api to fail.
+  tlsSecurity: "insecure",
+});
+
+const auth = createServerAuth(client, options);
+
+export default auth;

packages/create/src/recipes/remix/template/app/services.__auth/auth.ts

@@ -0,0 +1,11 @@
+import createClientAuth, {
+  type RemixAuthOptions,
+} from "@edgedb/auth-remix/client";
+
+export const options: RemixAuthOptions = {
+  baseUrl: "http://localhost:3000",
+};
+
+const auth = createClientAuth(options);
+
+export default auth;

packages/create/src/recipes/sveltekit/README.md

@@ -0,0 +1,51 @@
+# Sveltekit Integration Recipe for EdgeDB
+
+This recipe provides a starting point for building a [Sveltekit](https://kit.svelte.dev/) application with EdgeDB as the database.
+
+We try to actively monitor and incorporate significant changes from the original "create-app" templates to ensure developers have access to the latest features and best practices. However, we might not cover every possible configuration or permutation due to the vast scope of possibilities.
+
+✨ Check out the [`@edgedb/create` package](https://github.com/edgedb/edgedb-js/blob/master/packages/create/README.md) for more information.
+
+## Usage
+
+```bash
+$ npm create @edgedb
+# or
+yarn create @edgedb
+# or
+pnpm create @edgedb
+# or
+bun create @edgedb
+```
+
+After running the command, you will be prompted to provide a project name and choose the **"Sveltekit"** template. You can also specify whether to use EdgeDB Auth, initialize a git repository, and install dependencies.
+
+The tool will then create a new directory with the specified name and set up the project.
+
+## Local Recipe Development
+
+Install dependencies in the root directory:
+
+```bash
+$ yarn
+```
+
+Navigate into `packages/create`:
+
+```bash
+$ cd packages/create
+```
+
+Build @edgedb/create
+
+```bash
+$ yarn build
+```
+
+Run a local version:
+
+```bash
+$ yarn run create
+```
+
+Then choose the **"Sveltekit"** template.

packages/create/src/recipes/sveltekit/index.ts

@@ -47,8 +47,8 @@ const recipe: Recipe<SveltekitOptions> = {
     logger("Running Sveltekit recipe");
 
     const dirname = path.dirname(new URL(import.meta.url).pathname);
-    let tags;
 
+    let tags;
     if (useEdgeDBAuth) {
       tags = new Set<string>(["auth"]);
     }

packages/create/src/recipes/sveltekit/template/js/src/routes/+page.__auth.svelte

@@ -1,15 +1,26 @@
 <script>
+  import clientAuth from "$lib/auth";
+
   export let data;
 </script>
 
 <main>
   <h1>Welcome to SvelteKit</h1>
-  <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
   <p>
-    {#if data.isSignedIn}
-      You are signed in.
-    {:else}
-      You are not signed in.
-    {/if}
+    Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
   </p>
+
+  {#if data.isSignedIn}
+    <p>You are signed in. <a href={clientAuth.getSignoutUrl()}>Sign Out</a></p>
+  {:else}
+    <br />
+    <p>You are not signed in.</p>
+    <a href={clientAuth.getBuiltinUIUrl()}>Sign In with Builtin UI</a>
+    {#if !data.builtinUIEnabled}
+      <p>
+        In order to signin you need to firstly enable the built-in UI in the
+        auth config.
+      </p>
+    {/if}
+  {/if}
 </main>

packages/create/src/recipes/sveltekit/template/js/src/routes/+page.server.__auth.js

@@ -1,8 +1,14 @@
 export async function load({ locals }) {
   const session = locals.auth.session;
   const isSignedIn = await session.isSignedIn();
+  const { client } = session;
+
+  const builtinUIEnabled = await client.queryRequiredSingle(
+    `select exists ext::auth::UIConfig`
+  );
 
   return {
     isSignedIn,
+    builtinUIEnabled,
   };
 }

packages/create/src/recipes/sveltekit/template/jsdoc/src/routes/+page.__auth.svelte

@@ -1,16 +1,26 @@
 <script>
+  import clientAuth from "$lib/auth";
+
   export let data;
 </script>
 
 <main>
   <h1>Welcome to SvelteKit</h1>
-  <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
   <p>
-    {#if data.isSignedIn}
-      You are signed in.
-    {:else}
-      You are not signed in.
-    {/if}
+    Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
   </p>
-</main>
 
+  {#if data.isSignedIn}
+    <p>You are signed in. <a href={clientAuth.getSignoutUrl()}>Sign Out</a></p>
+  {:else}
+    <br />
+    <p>You are not signed in.</p>
+    <a href={clientAuth.getBuiltinUIUrl()}>Sign In with Builtin UI</a>
+    {#if !data.builtinUIEnabled}
+      <p>
+        In order to signin you need to firstly enable the built-in UI in the
+        auth config.
+      </p>
+    {/if}
+  {/if}
+</main>

packages/create/src/recipes/sveltekit/template/jsdoc/src/routes/+page.server.__auth.js

@@ -1,8 +1,14 @@
 export async function load({ locals }) {
   const session = locals.auth.session;
   const isSignedIn = await session.isSignedIn();
+  const { client } = session;
+
+  const builtinUIEnabled = await client.queryRequiredSingle(
+    `select exists ext::auth::UIConfig`
+  );
 
   return {
     isSignedIn,
+    builtinUIEnabled,
   };
 }