Closed darenc9 closed 2 months ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
fit-future | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 18, 2024 7:56pm |
fit-future-ui | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 18, 2024 7:56pm |
Backend-api
vercel.json
: added routes to specifically enable CORSFrontend-ui
Authentication Features
next.config.mjs
Added env variables for Cognito User PoolPackage.json
/src/components/AWS/ConfigureAmplify.js
: Component used to configure settings for Cognito to enable amplify features, including: authentication, authorization, sign-in, sign-up, pulling users from pool./src/app/layout.js
: ConfiguresAmplify
from layout level, and wraps the app with<Authenticator.Provider>
useAuthenticator
to pull user information for authentication/src/app/page.js
: exports Home withwithAuthenticator(Home)
. This change protects the home route from being accessed if user is not signed in/src/app/exercises/page.js
: Wrapped withwithAuthenticator
as middleware to protect route accessExercises
/src/atoms/exercisesPageAtoms.js
: created to store atoms to restore state of exercises page when navigating back to the exercises page. Stores exercises selected/src/app/exercises/page.jsx
exercises/ExerciseTable
to support Atoms and exercise selectionAuthentication Usage
Protecting a route
withAuthenticator
Example before:
Your page might look something like this:
Example after:
Import and use
withAuthenticator
to protect route: usingexport default withAuthenticator(PageName)
Import and useuseAuthenticator
to pull user object Include"use client";
After Next.js 13.4+: to use Server Components inside theapp
directory, we wrap everything inside a Client Component. Addinguse client;
enables this for us