-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
More XX fixes, correct address logged in console now
- Loading branch information
1 parent
47baf49
commit 7530878
Showing
5 changed files
with
102 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,75 @@ | ||
| import { useState, useEffect } from "react" | ||
| import { useSession } from "next-auth/react" | ||
| import styles from '@/styles/Home.module.css' | ||
| import Link from "next/link" | ||
| import { formatBalance } from '@polkadot/util'; | ||
| import { useState, useEffect } from 'react'; | ||
| import { useSession } from 'next-auth/react'; | ||
| import styles from '@/styles/Home.module.css'; | ||
| import Link from 'next/link'; | ||
| import { BN, formatBalance } from '@polkadot/util'; | ||
|
|
||
| import PolkadotParticles from "@/components/polkadot-particles" | ||
| import PolkadotParticles from '@/components/polkadot-particles'; | ||
|
|
||
| /** | ||
| * This is a protected page, it can only be accessed by authenticated users. Instead of using Server Side | ||
| * Rendering (SSR) to fetch the content, we use Static Generation and a protected API Route `/pages/api/auth.ts` | ||
| * This is a protected page, it can only be accessed by authenticated users. Instead of using Server Side | ||
| * Rendering (SSR) to fetch the content, we use Static Generation and a protected API Route `/pages/api/auth.ts` | ||
| * to fetch the content client side after the user has logged in. | ||
| */ | ||
| export default function ProtectedPage() { | ||
| const { data: session } = useSession() | ||
| const [content, setContent] = useState() | ||
| const { data: session } = useSession(); | ||
| const [content, setContent] = useState(); | ||
|
|
||
| // Fetch content from protected route | ||
| useEffect(() => { | ||
| const fetchData = async () => { | ||
| const res = await fetch("/api/auth") | ||
| const res = await fetch('/api/auth'); | ||
|
|
||
| if (res.ok) { | ||
| const json = await res.json() | ||
| const json = await res.json(); | ||
| if (json?.content) { | ||
| setContent(json.content) | ||
| setContent(json.content); | ||
| } | ||
| } | ||
| } | ||
| fetchData() | ||
| }, [session]) | ||
|
|
||
| }; | ||
| fetchData(); | ||
| }, [session]); | ||
|
|
||
| // If no session exists, display access denied message | ||
| if (!session) { | ||
| return ( | ||
| <main className={ styles.protected }> | ||
| <main className={styles.protected}> | ||
| <h1>You did not pass the 🚪</h1> | ||
| <p><Link href="/" className={ styles.colorA }>< go back</Link></p> | ||
| <p> | ||
| <Link href="/" className={styles.colorA}> | ||
| < go back | ||
| </Link> | ||
| </p> | ||
| </main> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| // format the big number to a human readable format | ||
| // const ksmBalance = formatBalance( session.freeBalance, { decimals: 12, withSi: true, withUnit: 'KSM' } ) | ||
| const ksmBalance = formatBalance( session.freeBalance, { decimals: 9, withSi: true, withUnit: 'XX' } ) | ||
| // const ksmBalance = formatBalance( freeBalance, { decimals: 12, withSi: true, withUnit: 'KSM' } ) | ||
| // AA: hard-coded 2.00 xx | ||
| const freeBalance = new BN(2000000000); | ||
| const ksmBalance = formatBalance(freeBalance, { | ||
| decimals: 9, | ||
| withSi: true, | ||
| withUnit: 'XX', | ||
| }); | ||
|
|
||
| // If session exists, display content | ||
| return ( | ||
| <main className={ styles.protected }> | ||
| <h1>🎉 Welcome { session.user?.name }, you passed the 🚪</h1> | ||
| <p>with { ksmBalance }</p> | ||
| <p>You are seeing a protected route that uses a static page and a protected api route. See the code at <code>/pages/protected.tsx</code></p> | ||
| <p> <Link href="/" className={ styles.colorA }>< go back</Link></p> | ||
| <main className={styles.protected}> | ||
| <h1>🎉 Welcome {session.user?.name}, you passed the 🚪</h1> | ||
| <p>with {ksmBalance}</p> | ||
| <p> | ||
| You are seeing a protected route that uses a static page and a protected api route. See the | ||
| code at <code>/pages/protected.tsx</code> | ||
| </p> | ||
| <p> | ||
| {' '} | ||
| <Link href="/" className={styles.colorA}> | ||
| < go back | ||
| </Link> | ||
| </p> | ||
| <PolkadotParticles /> | ||
| </main> | ||
| ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,70 @@ | ||
| import { getServerSession } from "next-auth/next" | ||
| import { useSession } from "next-auth/react" | ||
| import Link from "next/link" | ||
| import { authOptions } from "./api/auth/[...nextauth]" | ||
| import { getServerSession } from 'next-auth/next'; | ||
| import { useSession } from 'next-auth/react'; | ||
| import Link from 'next/link'; | ||
| import { authOptions } from './api/auth/[...nextauth]'; | ||
| import { BN, formatBalance, BN_ZERO } from '@polkadot/util'; | ||
| import { GetServerSideProps } from 'next' | ||
| import { GetServerSideProps } from 'next'; | ||
|
|
||
| import styles from '@/styles/Home.module.css' | ||
| import PolkadotParticles from "@/components/polkadot-particles" | ||
| import styles from '@/styles/Home.module.css'; | ||
| import PolkadotParticles from '@/components/polkadot-particles'; | ||
|
|
||
| export default function Admin( { freeBalance } : { freeBalance : BN } ) : JSX.Element { | ||
| const { data:session, status } = useSession({ | ||
| export default function Admin({ freeBalance }: { freeBalance: BN }): JSX.Element { | ||
| const { data: session, status } = useSession({ | ||
| required: true, | ||
| onUnauthenticated() { | ||
| console.log( 'not authenticated yet', status ) | ||
| console.log('not authenticated yet', status); | ||
| }, | ||
| }) | ||
| }); | ||
|
|
||
| if (status === "loading") { | ||
| if (status === 'loading') { | ||
| return ( | ||
| <main className={ styles.protected }> | ||
| <main className={styles.protected}> | ||
| <h1>You did not pass the 🚪</h1> | ||
| <p><Link href="/" className={ styles.colorA }>< go back</Link></p> | ||
| <p> | ||
| <Link href="/" className={styles.colorA}> | ||
| < go back | ||
| </Link> | ||
| </p> | ||
| </main> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| // format the big number to a human readable format | ||
| // const ksmBalance = formatBalance( freeBalance, { decimals: 12, withSi: true, withUnit: 'KSM' } ) | ||
| const ksmBalance = formatBalance( freeBalance, { decimals: 9, withSi: true, withUnit: 'XX' } ) | ||
|
|
||
| // AA: freeBalance obtained in L11 | ||
| const ksmBalance = formatBalance(freeBalance, { | ||
| decimals: 9, | ||
| withSi: true, | ||
| withUnit: 'XX', | ||
| }); | ||
| return ( | ||
| <main className={ styles.protected }> | ||
| <h1>🎉 Welcome { session.user?.name }, you passed the 🚪</h1> | ||
| <p>with { ksmBalance }</p> | ||
| <p>You are seeing a /protected route that uses Server-Side Generation at <code>/pages/protected.tsx</code> </p> | ||
| <p><Link href="/" className={ styles.colorA }>< go back</Link></p> | ||
| <main className={styles.protected}> | ||
| <h1>🎉 Welcome {session.user?.name}, you passed the 🚪</h1> | ||
| <p>with {ksmBalance}</p> | ||
| <p> | ||
| You are seeing a /protected route that uses Server-Side Generation at{' '} | ||
| <code>/pages/protected.tsx</code>{' '} | ||
| </p> | ||
| <p> | ||
| <Link href="/" className={styles.colorA}> | ||
| < go back | ||
| </Link> | ||
| </p> | ||
| <PolkadotParticles /> | ||
| </main> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| // this tells next to render the page on the server side | ||
| export const getServerSideProps: GetServerSideProps = async (context) => { | ||
|
|
||
| // Get the user's session based on the request | ||
| // read more about get Server session here: | ||
| // https://next-auth.js.org/tutorials/securing-pages-and-api-routes | ||
| let session = await getServerSession( | ||
| context.req, | ||
| context.res, | ||
| authOptions | ||
| ) | ||
| let session = await getServerSession(context.req, context.res, authOptions); | ||
|
|
||
| return { | ||
| props: { | ||
| freeBalance: session?.freeBalance ?? JSON.stringify(BN_ZERO), | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters