.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["@example/*"]
 }

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
     name: Release / Node ${{ matrix.node }}
     strategy:
       matrix:
-        node: ['16']
+        node: ['18']
 
     runs-on: ubuntu-latest
 
@@ -20,7 +20,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2.0.1
         with:
-          version: 7.1.7
+          version: 8.7.0
 
       - name: Set up Node
         uses: actions/setup-node@v2

.gitignore

@@ -25,6 +25,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -1,25 +1,62 @@
+
+# Maintenance Mode
+
+As of 7th Feb 2024, this repository is no longer maintained by the Supabase Team. At the moment, the team does not have capacity to give the expected level of care to this repository. We may revisit Auth UI in the future but regrettably have to leave it on hold for now as we focus on other priorities such as improving the Auth Helpers and advanced Auth primitives.
+
+The repository itself will continue to exist and we will move bulk of the Auth UI to [Supabase-Community](https://github.com/supabase-community/auth-ui) over the next few weeks. A subset of components within the Next.js ecosystem, such as Forgot Password Pages, will be iterated on. We will continue to keep the latest packages for frameworks available at `@supabase/auth-ui-svelte`.
+
+We would like to thank everyone for your contributions to the repository. Please feel free to open an issue if you have any questions or concerns.
+
+Thank you.
+
 # Supabase Auth UI
 
 Supabase Auth UI is a collection of pre built UI components that work seamlessly with @supabase/auth-helpers.
 
 The main purpose of these components is to allow developers to get working on their apps quickly, but also be able to use their own style/css.
 
-Auth UI is kept deliberatly seperate from @supabase/auth-helpers so that developers can migrate away from pre-built UI components as their UI system naturally matures.
+Auth UI is kept deliberately separate from @supabase/auth-helpers so that developers can migrate away from pre-built UI components as their UI system naturally matures.
 
 <img width="552" alt="Screenshot 2022-04-30 at 9 30 25 PM" src="https://user-images.githubusercontent.com/8291514/166107630-edb5190c-1d27-4757-8960-11ef14f87af1.png">
 
+
 ## Supported frameworks
 
-- React
+- [React.js](https://reactjs.org/) [[Documentation](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui)]
+- [Solid.js](https://www.solidjs.com/)
+- [Svelte](https://svelte.dev/)
 
 ### Examples and Packages
 
 - Examples
+  - `@example/react`: a [React.js](./examples/react) app
+  - `@example/solid`: a [Solid.js](./examples/solidjs) app
+  - `@example/svelte`: a [Svelte](./examples/svelte) app
+- Packages
+  - `@supabase/auth-ui-react`: the supabase auth ui reactjs library used by `react` application
+  - `@supabase/auth-ui-solid`: the supabase auth ui solid.js library used by `solid.js` application
+  - `@supabase/auth-ui-svelte`: the supabase auth ui svelte library used by `svelte` application
+  - `shared`: shared typescript types used by `@supabase/auth-ui-[framework]` library
+  - `tsconfig`: `tsconfig.json`s used throughout the monorepo
 
-  - Coming soon
+Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
 
-- Packages
-  - React - will be released on @supabase/auth-ui-react
+## Localization
+
+Localizations are no longer distributed with the package in order to keep the package size small. You can now import the localization you need by copying the file from this repo and importing it into your project then passing it to the `localization.variables` param of the Auth component.
+
+```tsx
+import { Auth } from '@supabase/auth-ui-react'
+import * as ja from './path-to-localization-file.json'
+...
+<Auth
+  supabaseClient={supabase}
+  localization={{
+    variables: ja
+  }}
+/>
+...
+```
 
 ## Development
 

development.md

@@ -23,6 +23,18 @@ You can run all the packages in development mode using the following command:
 pnpm dev
 ```
 
+Or you can run development for the individual packages using the following command:
+
+```bash
+pnpm dev:[dirname]
+```
+
+For `React` it would be:
+
+```bash
+pnpm dev:react
+```
+
 ### Build
 
 You can build all packages using the following command:
@@ -37,7 +49,7 @@ Or you can run build for the individual packages using the following command:
 pnpm build:[dirname]
 ```
 
-For react it would be
+For `React` it would be:
 
 ```bash
 pnpm build:react
@@ -50,23 +62,3 @@ To generate a changelog entry, run the following command:
 ```sh
 pnpm changeset
 ```
-
-### Storybook
-
-Storybook is setup on a per package basis, you can run storybook for all packages at the same time using the following command:
-
-```bash
-pnpm storybook
-```
-
-Or you can run storybook for individual packages using the following command:
-
-```bash
-pnpm storybook:[dirname]
-```
-
-For react it would be
-
-```bash
-pnpm storybook:react
-```

examples/react/.env.example

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=http://localhost:54321
+VITE_SUPABASE_ANON_KEY=

examples/react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/react/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auth UI React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/react/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@example/react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"npm run dev:css\" \"vite\"",
+    "dev:css": "tailwindcss -w -i ./src/tailwind.css -o src/app.css",
+    "build:example": "npm run build:css && tsc && vite build",
+    "build:css": "tailwindcss -m -i ./src/tailwind.css -o src/app.css",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@supabase/auth-ui-react": "workspace:*",
+    "@supabase/auth-ui-shared": "workspace:*",
+    "@supabase/supabase-js": "^2.21.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.13",
+    "concurrently": "^7.6.0",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.3",
+    "vite": "^4.5.2"
+  }
+}

examples/react/src/App.module.css

@@ -0,0 +1,23 @@
+.container-redshadow {
+  min-width: 300px;
+  box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
+  border-radius: 1rem;
+}
+
+.container-greenshadow {
+  min-width: 300px;
+  box-shadow: -2px 1px 69px 5px rgb(65, 163, 35);
+  border-radius: 1rem;
+}
+
+.container-blueshadow {
+  min-width: 300px;
+  box-shadow: -2px 1px 69px 5px rgb(8, 107, 177);
+  border-radius: 1rem;
+}
+
+.container-orangeshadow {
+  min-width: 300px;
+  box-shadow: -2px 1px 69px 5px rgb(235, 115, 29);
+  border-radius: 1rem;
+}