Signup flow (Metaverse ogin/signup)

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 
 # swp files
 *.swp
+
+#lock
+yarn.lock

components/ContinueButton.js

@@ -0,0 +1,29 @@
+const ContinueButton = (props) => {
+  console.log(props);
+  return (
+    <div className=" mr-4 z-50">
+      {props.loading && (
+        <ClipLoader css="position: absolute; right: 36px; margin-top: 16px;" />
+      )}
+      <a href={props.continueButtonLink}>
+        <button
+          className={` rounded-full overflow-hidden bg-yellow-100 shadow-xl p-3 hover:bg-yellow-200 ${
+            props.isHomepage ? "w-full" : null
+          } ${
+            props.loading
+              ? "opacity-0"
+              : props.disabled
+              ? "opacity-50"
+              : "opacity-100"
+          }`}
+          onClick={props.onClick}
+          disabled={props.disabled}
+        >
+          <p className="text-black-900 font-bold text-2xl p-1">{props.text} </p>
+        </button>
+      </a>
+    </div>
+  );
+};
+
+export default ContinueButton;

components/account.js

@@ -0,0 +1,110 @@
+import { useState, useEffect } from 'react'
+import { supabase } from '../utils/supabaseClient'
+
+export default function Account({ session }) {
+  const [loading, setLoading] = useState(true)
+  const [username, setUsername] = useState(null)
+  const [website, setWebsite] = useState(null)
+  const [avatar_url, setAvatarUrl] = useState(null)
+
+  useEffect(() => {
+    getProfile()
+  }, [session])
+
+  async function getProfile() {
+    try {
+      setLoading(true)
+      const user = supabase.auth.user()
+
+      let { data, error, status } = await supabase
+        .from('users')
+        .select(`username, website, avatar_url`)
+        .eq('id', user.id)
+        .single()
+
+      if (error && status !== 406) {
+        throw error
+      }
+
+      if (data) {
+        setUsername(data.username)
+        setWebsite(data.website)
+        setAvatarUrl(data.avatar_url)
+      }
+    } catch (error) {
+      alert(error.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function updateProfile({ username, website, avatar_url }) {
+    try {
+      setLoading(true)
+      const user = supabase.auth.user()
+
+      const updates = {
+        id: user.id,
+        username,
+        website,
+        avatar_url,
+        updated_at: new Date(),
+      }
+
+      let { error } = await supabase.from('profiles').upsert(updates, {
+        returning: 'minimal', // Don't return the value after inserting
+      })
+
+      if (error) {
+        throw error
+      }
+    } catch (error) {
+      alert(error.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="form-widget">
+      <div>
+        <label htmlFor="email">Email</label>
+        <input id="email" type="text" value={session.user.email} disabled />
+      </div>
+      <div>
+        <label htmlFor="username">Name</label>
+        <input
+          id="username"
+          type="text"
+          value={username || ''}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="website">Website</label>
+        <input
+          id="website"
+          type="website"
+          value={website || ''}
+          onChange={(e) => setWebsite(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <button
+          className="button block primary"
+          onClick={() => updateProfile({ username, website, avatar_url })}
+          disabled={loading}
+        >
+          {loading ? 'Loading ...' : 'Update'}
+        </button>
+      </div>
+
+      <div>
+        <button className="button block" onClick={() => supabase.auth.signOut()}>
+          Sign Out
+        </button>
+      </div>
+    </div>
+  )
+}

components/auth.js

@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import { supabase } from '../utils/supabaseClient'
+
+export default function Auth() {
+  const [loading, setLoading] = useState(false)
+  const [email, setEmail] = useState('')
+
+  const handleLogin = async () => {
+    try {
+      setLoading(true)
+      const { error } = await supabase.auth.signIn({ provider: 'google' })
+      if (error) throw error
+    } catch (error) {
+      alert(error.error_description || error.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="row flex flex-center">
+      <div className="col-6 form-widget">
+        <p className="description">Sign in via google below</p>
+        <div>
+
+        </div>
+        <div>
+          <button
+            onClick={(e) => {
+              e.preventDefault()
+              handleLogin()
+            }}
+            className="button block"
+            disabled={loading}
+          >
+            <span>{loading ? 'Loading' : 'Sign in'}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

components/navbar.js

@@ -43,8 +43,8 @@ export default function NavbarBuilder() {
                 </Disclosure.Button>
               </div>
               <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                <div className="flex-shrink-0 flex items-center text-white font-bold">
-                  V1 at Michigan
+                <div className="flex-shrink-0 flex items-center text-white text-2xl font-bold hover:opacity-50 hover:cursor-pointer">
+                  V1
                 </div>
                 <div className="hidden sm:block sm:ml-6">
                   <div className="flex space-x-4">

hooks/loggedin.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+import { supabase } from '../utils/supabaseClient'
+import Auth from '../components/Auth'
+import Account from '../components/Account'
+
+export default function LoggedIn() {
+  const [session, setSession] = useState(null)
+
+  useEffect(() => {
+    setSession(supabase.auth.session())
+  }, [])
+    console.log(session)
+  return session;
+}

package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@headlessui/react": "^1.2.0",
     "@heroicons/react": "^1.0.1",
+    "@supabase/supabase-js": "^1.29.0",
     "axios": "^0.21.1",
-    "dotenv": "^10.0.0",
     "googleapis": "^39.2.0",
     "https": "^1.0.0",
     "next": "latest",
@@ -20,6 +20,8 @@
     "react-dom": "^16.13.1",
     "react-html-parser": "^2.0.2",
     "react-reveal": "^1.2.2",
+    "react-spinners": "^0.11.0",
+    "react-tsparticles": "^1.37.5",
     "sweetalert2": "^10.3.5",
     "typeface-inter": "^3.15.0",
     "typeface-source-sans-pro": "^1.1.5"

pages/_document.js

@@ -12,7 +12,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head />
-        <body className="bg-black">
+        <body>
           <Main />
           <NextScript />
         </body>

pages/login.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+import { supabase } from '../utils/supabaseClient'
+import Auth from '../components/Auth'
+import Account from '../components/Account'
+import LoggedIn from '../hooks/loggedin';
+export default function Login() {
+    const session = LoggedIn();
+    console.log(session);
+  return (
+    <div style={{ padding: '50px 0 100px 0' }}>
+      {!session ? <Auth /> : <Account key={session.user.id} session={session} />}
+    </div>
+  )
+}