Skip to content

Commit

Permalink
🍀🚀 ↣ Successfully navigating authentication routes between #18 and th…
Browse files Browse the repository at this point in the history 
…e Supabase configuration
  • Loading branch information
@Gizmotronn
Gizmotronn committed Nov 24, 2022
1 parent 2ba259c commit d10b1f5
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 66 deletions.
46 changes: 46 additions & 0 deletions components/Auth/Auth.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useState } from "react";
import { supabase } from "../../pages/supabaseClient";

export default function Auth() {
const [loading, setLoading] = useState(false);
const [email, setEmail] = useState('');
const handleLogin = async (e) => {
e.preventDefault();
try {
setLoading(true);
const { error } = await supabase.auth.signIn({ email });
if (error) throw error;
alert('Check your email for the login info');
} catch (error) {
alert(error.error_description || error.message);
} finally {
setLoading(false);
}
}

return (
<div className="container mx-auto text-center w-72">
<div className="col-6 form-widget" aria-live="polite">
<h1 className="header text-3xl py-3 text-gray-600">Login</h1>
<p className="text-xs text-gray-500 pb-3">Sign in via magic link with your email</p>
{loading ? (
'Sending magic link...'
) : (
<form onSubmit={handleLogin}>
<input type="email"
name="email"
class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1"
placeholder="your email"
id="website"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button class="my-3 w-36 text-xs h-8 rounded-full text-gray-50 bg-indigo-600 hover:bg-indigo-700">
Send Magic link
</button>
</form>
)}
</div>
</div>
);
}
149 changes: 83 additions & 66 deletions pages/play.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
useContract,
useMetamask,
} from "@thirdweb-dev/react";
import React from "react";
import React, { useEffect, useState } from "react";
import CurrentGear from "../components/Ansible/CurrentGear";
import LoadingSection from "../components/Ansible/LoadingSection";
import OwnedGear from "../components/Ansible/OwnedGear";
Expand All @@ -19,6 +19,8 @@ import {
import styles from "../styles/Home.module.css";

import Dao from "../components/dao";
import Auth from "../components/Auth/Auth";
import { supabase } from "./supabaseClient";

export default function Play() {
const address = useAddress();
Expand All @@ -42,78 +44,93 @@ export default function Play() {
);
}

return (
<div className={styles.container}>
<Dao />
{miningContract &&
characterContract &&
tokenContract &&
pickaxeContract ? (
<div className={styles.mainSection}>
<CurrentGear
miningContract={miningContract}
characterContract={characterContract}
pickaxeContract={pickaxeContract}
/>
<Rewards
miningContract={miningContract}
tokenContract={tokenContract}
/>
</div>
) : (
<LoadingSection />
)}

<hr className={`${styles.divider} ${styles.bigSpacerTop}`} />
// Supabase authentication components
const [session, setSession] = useState(null);
useEffect(() => {
setSession(supabase.auth.session())
supabase.auth.onAuthStateChange((_event, session) => {
setSession(session)
})
}, [])

{pickaxeContract && miningContract ? (
<>
<h2 className={`${styles.noGapTop} ${styles.noGapBottom}`}>
Your Owned Pickaxes
</h2>
<div
style={{
width: "100%",
minHeight: "10rem",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: 8,
}}
>
<OwnedGear
return (
<div className="container mx-auto">
{/* {!session ? <Auth /> : <Account key={session.user.id} session={session} />}
Maybe move everything below into a new component, and then set that component in the place of <Account key.... />
*/}
<div className={styles.container}>
<Auth />
<Dao />
{miningContract &&
characterContract &&
tokenContract &&
pickaxeContract ? (
<div className={styles.mainSection}>
<CurrentGear
miningContract={miningContract}
characterContract={characterContract}
pickaxeContract={pickaxeContract}
/>
<Rewards
miningContract={miningContract}
tokenContract={tokenContract}
/>
</div>
</>
) : (
<LoadingSection />
)}
) : (
<LoadingSection />
)}

<hr className={`${styles.divider} ${styles.bigSpacerTop}`} />
<hr className={`${styles.divider} ${styles.bigSpacerTop}`} />

{pickaxeContract && tokenContract ? (
<>
<h2 className={`${styles.noGapTop} ${styles.noGapBottom}`}>Shop</h2>
<div
style={{
width: "100%",
minHeight: "10rem",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: 8,
}}
>
<Shop pickaxeContract={pickaxeContract} />
</div>
</>
) : (
<LoadingSection />
)}
{pickaxeContract && miningContract ? (
<>
<h2 className={`${styles.noGapTop} ${styles.noGapBottom}`}>
Your Owned Pickaxes
</h2>
<div
style={{
width: "100%",
minHeight: "10rem",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: 8,
}}
>
<OwnedGear
pickaxeContract={pickaxeContract}
miningContract={miningContract}
/>
</div>
</>
) : (
<LoadingSection />
)}

<hr className={`${styles.divider} ${styles.bigSpacerTop}`} />

{pickaxeContract && tokenContract ? (
<>
<h2 className={`${styles.noGapTop} ${styles.noGapBottom}`}>Shop</h2>
<div
style={{
width: "100%",
minHeight: "10rem",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: 8,
}}
>
<Shop pickaxeContract={pickaxeContract} />
</div>
</>
) : (
<LoadingSection />
)}
</div>
</div>
);
}

0 comments on commit d10b1f5

Please sign in to comment.