fix: actual example of solid authjs (#1658)

examples/with-authjs/.env.example

@@ -1,4 +1,6 @@
-DISCORD_CLIENT_ID=
-DISCORD_CLIENT_SECRET=
-AUTH_SECRET=d40e96a10287cfcf90c6b91679f512ee
-AUTH_TRUST_HOST=true
+DISCORD_ID=
+DISCORD_SECRET=
+AUTH_SECRET=b198e07a64406260b98f06e21c457b84
+AUTH_TRUST_HOST=true
+AUTH_URL=http://localhost:3000
+VITE_AUTH_PATH=/api/auth

examples/with-authjs/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "plugin:solid/typescript",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": "warn"
+  }
+}

examples/with-authjs/.gitignore

@@ -0,0 +1,25 @@
+dist
+.solid
+.output
+.vercel
+.netlify
+netlify
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.env

examples/with-authjs/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+}

examples/with-authjs/README.md

@@ -8,5 +8,15 @@ In order to run this example, you need to setup i.e. a Discord app in here: http
 
 Everything you need to build an [AuthJS](https://authjs.dev/) authenticated Solid project, powered by [`solid-start`](https://start.solidjs.com);
 
+This will start a production server on port `3000`.
 
-Note that Discord is just one of many auth providers supported by Auth.js.
+### Enviroment Variables
+
+- `DISCORD_ID`=
+- `DISCORD_SECRET`=
+- `AUTH_SECRET`=b198e07a64406260b98f06e21c457b84
+- `AUTH_TRUST_HOST`=true
+- `AUTH_URL`=http://localhost:3000
+- `VITE_AUTH_PATH`=/api/auth
+
+[Sponsor Create JD App](https://github.com/sponsors/OrJDev)

examples/with-authjs/app.config.ts

@@ -1,3 +1,5 @@
 import { defineConfig } from "@solidjs/start/config";
 
-export default defineConfig({});
+export default defineConfig({
+  ssr: true,
+});

examples/with-authjs/package.json

@@ -3,28 +3,34 @@
   "scripts": {
     "dev": "vinxi dev",
     "build": "vinxi build",
-    "start": "vinxi start"
+    "start": "vinxi start",
+    "lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\""
   },
   "type": "module",
   "devDependencies": {
-    "@types/node": "^20.12.7",
-    "esbuild": "^0.20.2",
-    "next-auth": "^4.24.7",
-    "postcss": "^8.4.38",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.8"
+    "@types/node": "^20.11.26",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-solid": "^0.14.3",
+    "typescript": "^5.6.2",
+    "vite": "^5.1.6"
   },
   "dependencies": {
-    "@auth/core": "^0.29.0",
-    "@babel/core": "7.24.4",
-    "@solid-mediakit/auth": "^2.0.11",
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.14.10",
-    "@solidjs/start": "^1.0.9",
+    "@solidjs/router": "^0.14.7",
+    "@solidjs/start": "^1.0.8",
     "solid-js": "^1.9.2",
-    "vinxi": "^0.4.3"
+    "vinxi": "^0.4.3",
+    "@solidjs/meta": "^0.29.4",
+    "zod": "^3.22.4",
+    "@auth/core": "0.35.0",
+    "@solid-mediakit/auth": "^3.0.0",
+    "@solid-mediakit/auth-plugin": "^1.1.4",
+    "postcss": "^8.4.40",
+    "autoprefixer": "^10.4.19",
+    "tailwindcss": "^3.4.7"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=16"
   }
-}
+}

examples/with-authjs/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/with-authjs/src/app.css

@@ -1,69 +1,3 @@
-body {
-  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
-main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-a {
-  margin-right: 1rem;
-}
-
-main {
-  text-align: center;
-  padding: 1em;
-  gap: 0.5rem;
-}
-
-main img {
-  height: 3rem;
-  width: 3rem;
-  border-radius: 50%;
-}
-
-h1 {
-  color: #335d92;
-  text-transform: uppercase;
-  font-size: 4rem;
-  font-weight: 100;
-  line-height: 1.1;
-  margin: 4rem auto;
-  max-width: 14rem;
-}
-
-main button {
-  width: 3.5rem;
-  padding: 0.5rem;
-  width: 12rem;
-  border: none;
-  border-radius: 0.25rem;
-  background: #335d92;
-  color: #fff;
-  font-size: 1.5rem;
-  cursor: pointer;
-}
-
-main span {
-  font-size: 1rem;
-  font-weight: bold;
-}
-
-p {
-  max-width: 14rem;
-  margin: 2rem auto;
-  line-height: 1.35;
-}
-
-@media (min-width: 480px) {
-  h1 {
-    max-width: none;
-  }
-
-  p {
-    max-width: none;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/with-authjs/src/app.tsx

@@ -1,19 +1,17 @@
 // @refresh reload
-import { SessionProvider } from '@solid-mediakit/auth/client';
-import { MetaProvider, Title } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
-import "./app.css";
+import { MetaProvider, Title } from '@solidjs/meta'
+import { Router } from '@solidjs/router'
+import { FileRoutes } from '@solidjs/start/router'
+import { Suspense } from 'solid-js'
+import './app.css'
+import { SessionProvider } from '@solid-mediakit/auth/client'
 
 export default function App() {
   return (
     <Router
-      root={props => (
+      root={(props) => (
         <MetaProvider>
-          <Title>SolidStart - Basic</Title>
-          <a href="/">Index</a>
-          <a href="/protected">Protected</a>
+          <Title>Create JD APP</Title>
           <Suspense>
             <SessionProvider>{props.children} </SessionProvider>
           </Suspense>
@@ -22,6 +20,5 @@ export default function App() {
     >
       <FileRoutes />
     </Router>
-  );
+  )
 }
-

examples/with-authjs/src/entry-client.tsx

@@ -1,3 +1,3 @@
 import { mount, StartClient } from "@solidjs/start/client";
 
-mount(() => <StartClient />, document.getElementById("app"));
+mount(() => <StartClient />, document.getElementById("app")!);

examples/with-authjs/src/env/client.ts

@@ -0,0 +1,24 @@
+import type { ZodFormattedError } from "zod";
+import { clientScheme } from "./schema";
+
+export const formatErrors = (
+  errors: ZodFormattedError<Map<string, string>, string>
+) =>
+  Object.entries(errors)
+    .map(([name, value]) => {
+      if (value && "_errors" in value)
+        return `${name}: ${value._errors.join(", ")}\n`;
+    })
+    .filter(Boolean);
+
+const env = clientScheme.safeParse(import.meta.env);
+
+if (env.success === false) {
+  console.error(
+    "❌ Invalid environment variables:\n",
+    ...formatErrors(env.error.format())
+  );
+  throw new Error("Invalid environment variables");
+}
+
+export const clientEnv = env.data;

examples/with-authjs/src/env/schema.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const serverScheme = z.object({
+  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
+  DISCORD_ID: z.string(),
+  DISCORD_SECRET: z.string(),
+  AUTH_SECRET: z.string(),
+  AUTH_TRUST_HOST: z.string().optional(),
+  AUTH_URL: z.string().optional(),
+});
+
+export const clientScheme = z.object({
+  MODE: z.enum(['development', 'production', 'test']).default('development'),
+  VITE_AUTH_PATH: z.string().optional(),
+});

examples/with-authjs/src/env/server.ts

@@ -0,0 +1,24 @@
+import { serverScheme } from "./schema";
+import type { ZodFormattedError } from "zod";
+
+export const formatErrors = (
+  errors: ZodFormattedError<Map<string, string>, string>
+) =>
+  Object.entries(errors)
+    .map(([name, value]) => {
+      if (value && "_errors" in value)
+        return `${name}: ${value._errors.join(", ")}\n`;
+    })
+    .filter(Boolean);
+
+const env = serverScheme.safeParse(process.env);
+
+if (env.success === false) {
+  console.error(
+    "❌ Invalid environment variables:\n",
+    ...formatErrors(env.error.format())
+  );
+  throw new Error("Invalid environment variables");
+}
+
+export const serverEnv = env.data;