Backend-api

vercel.json : added routes to specifically enable CORS

Frontend-ui

Authentication Features

next.config.mjs Added env variables for Cognito User Pool
Package.json
- Installed @aws-amplify
- Installed @aws-amplify/ui-react
- Installed @aws-amplify/adapter-nextjs
- These packages are needed for Authentcation through AWS Cognito
/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 : Configures Amplify from layout level, and wraps the app with <Authenticator.Provider>
- With this wrapper, it allows any page to use: useAuthenticator to pull user information for authentication
/src/app/page.js: exports Home with withAuthenticator(Home). This change protects the home route from being accessed if user is not signed in
/src/app/exercises/page.js: Wrapped with withAuthenticator as middleware to protect route access

Exercises

/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
- Uses Atom to store state of exercises
- Feature to select exercises and store into atom
- Changes were made to components: exercises/ExerciseTable to support Atoms and exercise selection

Authentication Usage

Protecting a route

Export function with: withAuthenticator

Example before:

Your page might look something like this:

"use client";
import React from 'react';

export default Home() {
    return (
        <main>Example</main>
    );
}

Example after:

Import and use withAuthenticator to protect route: using export default withAuthenticator(PageName) Import and use useAuthenticator to pull user object Include "use client"; After Next.js 13.4+: to use Server Components inside the app directory, we wrap everything inside a Client Component. Adding use client; enables this for us

"use client";
import React from 'react';
import { withAuthenticator } from "@aws-amplify/ui-react";
import { useAuthenticator } from '@aws-amplify/ui-react';

function Home() {
  const { user, signOut } = useAuthenticator((context) => [context.user]);
  return (
    <main>
    <h1>Hello {user.username}</h1>
    <button onClick={signOut} > Sign out </button>
  </main>
  );
}
export default withAuthenticator(Home);

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

darenc9 / FitFuture

Devon/deploy #81