🚁🛰 ↣ Supabase profiles & storage buckets now being updated through Ne…

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -8,16 +8,29 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "jira-plugin.workingProject": ""
+}

frontend/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/client.js

@@ -0,0 +1,11 @@
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = "https://afwwxlhknelxylrfvexi.supabase.co";
+const supabaseAnonKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFmd3d4bGhrbmVseHlscmZ2ZXhpIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjY0MzQ4MTgsImV4cCI6MTk4MjAxMDgxOH0.gk1F8Br9__04cvzqYIeeQ-U08KATiHovAw3r3ofNGAo"
+
+const supabase = createClient(
+  supabaseUrl,
+  supabaseAnonKey
+)
+
+export { supabase }

frontend/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

frontend/package.json

@@ -1,45 +1,22 @@
 {
-  "name": "star-sailors-auth-client",
+  "name": "supabase-auth",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@supabase/supabase-js": "^2.0.6",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "supabase": "^1.11.7",
-    "web-vitals": "^2.1.4"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "dependencies": {
+    "@supabase/supabase-js": "^1.18.1",
+    "next": "11.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "swr": "^0.5.6"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.19",
-    "tailwindcss": "^3.2.3"
+    "eslint": "7.30.0",
+    "eslint-config-next": "11.0.1"
   }
 }

frontend/pages/_app.js

@@ -0,0 +1,73 @@
+import '../styles/globals.css'
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { supabase } from '../client'
+import { useRouter } from 'next/router'
+
+function MyApp({ Component, pageProps }) {
+  const router = useRouter()
+  const [authenticatedState, setAuthenticatedState] = useState('not-authenticated')
+  useEffect(() => {
+    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
+      handleAuthChange(event, session)
+      if (event === 'SIGNED_IN') {
+        setAuthenticatedState('authenticated')
+        router.push('/profile')
+      }
+      if (event === 'SIGNED_OUT') {
+        setAuthenticatedState('not-authenticated')
+      }
+    })
+    checkUser()
+    return () => {
+      authListener.unsubscribe()
+    }
+  }, [])
+  async function checkUser() {
+    const user = await supabase.auth.user()
+    if (user) {
+      setAuthenticatedState('authenticated')
+    }
+  }
+  async function handleAuthChange(event, session) {
+    await fetch('/api/auth', {
+      method: 'POST',
+      headers: new Headers({ 'Content-Type': 'application/json' }),
+      credentials: 'same-origin',
+      body: JSON.stringify({ event, session }),
+    })
+  }
+  return (
+    <div>
+      <nav style={navStyle}>
+        <Link href="/">
+          <a style={linkStyle}>Home</a>
+        </Link>
+        <Link href="/profile">
+          <a style={linkStyle}>Profile</a>
+        </Link>
+        {
+          authenticatedState === 'not-authenticated' && (
+            <Link href="/sign-in">
+              <a style={linkStyle}>Sign In</a>
+            </Link>
+          )
+        }
+        <Link href="/protected">
+          <a style={linkStyle}>Protected</a>
+        </Link>
+      </nav>
+      <Component {...pageProps} />
+    </div>
+  )
+}
+
+const navStyle = {
+  margin: 20
+}
+
+const linkStyle = {
+  marginRight: 10
+}
+
+export default MyApp

frontend/pages/api/auth.js

@@ -0,0 +1,5 @@
+import { supabase } from '../../client'
+
+export default function handler(req, res) {
+  supabase.auth.api.setAuthCookie(req, res)
+}

frontend/src/src/components/Account.js → frontend/pages/components/Account.js

@@ -1,10 +1,8 @@
-// get the fields values 
-import { useState, useEffect } from "react"
-import { supabase } from "../supabaseClient"
-import Avatar from './Avatar';
+import { useState, useEffect } from "react";
+import { supabase } from "../../client";
+import Avatar from "./Avatar";
 
 const Account = ( { session } ) => {
-
     const [loading, setLoading] = useState(true)
     const [username, setUsername] = useState(null)
     const [website, setWebsite] = useState(null)
@@ -129,10 +127,6 @@ const Account = ( { session } ) => {
 
     </div>
     )
-
-
 }
 
-export default Account;
-
-// update these values
+export default Account;

frontend/pages/components/Avatar.js

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '../../client';
+import Icon from '../assets/Face.png';
+import camera from '../assets/camera on.png';
+
+export default function Avatar({ url, size, onUpload }) {
+    const [avatarUrl, setAvatarUrl] = useState(null)
+    const [uploading, setUploading] = useState(false)
+
+    useEffect(() => {
+      if (url) downloadImage(url)
+    }, [url])
+
+    const downloadImage = async (path) => {
+      try {
+        const { data, error } = await supabase.storage.from('avatars').download(path)
+        if (error) {
+          throw error
+        }
+        const url = URL.createObjectURL(data)
+        setAvatarUrl(url)
+      } catch (error) {
+        console.log('Error downloading image: ', error.message)
+      }
+    }
+
+    const uploadAvatar = async (event) => {
+      try {
+        setUploading(true)
+
+        if (!event.target.files || event.target.files.length === 0) {
+          throw new Error('You must select an image to upload.')
+        }
+
+        const file = event.target.files[0]
+        const fileExt = file.name.split('.').pop()
+        const fileName = `${Math.random()}.${fileExt}`
+        const filePath = `${fileName}`
+
+        let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
+
+        if (uploadError) {
+          throw uploadError
+        }
+
+        onUpload(filePath)
+      } catch (error) {
+        alert(error.message)
+      } finally {
+        setUploading(false)
+      }
+    }
+
+    return (
+      <div style={{ width: size }} aria-live="polite" className='container mx-auto text-center'>
+         <div class="flex justify-center">
+            <div class="flex flex-col justify-center shrink-0 relative">
+                <label for="files" class=" opacity-25 w-full h-full bg-gray-400 rounded-full flex justify-center absolute  cursor-pointer">
+                    {/* <img src={camera} alt="" class="w-24 h-24 mt-5" /> */}
+                </label>
+                <img 
+                  class="w-18 h-18 object-cover rounded-full" 
+                  src={avatarUrl ? avatarUrl : camera}
+                  alt={avatarUrl ? 'Avatar' : 'No image'}
+                  style={{ height: size, width: size }}
+                 />
+                 {uploading ? "Uploading..." : (
+                   <>
+                      <input 
+                        type="file" 
+                        id="files" 
+                        accept="image/*"
+                        class="hidden"
+                        onChange={uploadAvatar}
+                        disabled={uploading}/>
+                   </>
+                  )}
+            </div>
+          </div>
+      </div>
+    )
+}

frontend/pages/index.js

@@ -0,0 +1,12 @@
+import styles from '../styles/Home.module.css'
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Hello World!
+        </h1>
+       </main>
+    </div>
+  )
+}