US-18-User account

[YavorLalev]

Value proposition

As a user
I want to have an account
where I can sign in and sign out.

Description

Acceptance Criteria

• Sign-in-button at the top right of the Startpage
• Clicking the button leads to a new page with a sign-in-form (Username: .../ Password: ...., Sign-in-button)
• Clicking the Sign-in-button leads back to the Startpage
• When logged-in, the Sign-in-button changes to Sign-out-button and a text is displayed next to the Sign-out-button: "You are logged in as ...."
• Clicking the Sign-out-button signs the user out and redirects the user to the Startpage

Tasks

• Create a new feature branch "user-account"
• Register a OAuth-App at GitHub: https://github.com/NikRoe/nextauth-demo-codealong?tab=readme-ov-file#1---register-a-oauth-app-at-github
• Basic setup: https://github.com/NikRoe/nextauth-demo-codealong?tab=readme-ov-file#2---basic-setup
• Provide session context in app.js: https://github.com/NikRoe/nextauth-demo-codealong?tab=readme-ov-file#3-session-context-bereitstellen-in-der-_appjs
• Create SignInForm component:
  • import { useSession, signIn, signOut } from "next-auth/react";
• add Sign in button to the StartPage component
• create "user" - collection in mongoDB
• create User schema and model in /db/models
• create dynamic user API-routes pages/api/user/[id].js and handle the needed methods

[F-Kirchhoff]

Hey Plotdata Team,
your user story looks fantastic and is ready to go. One little remark: you are planning to manually setup your user db. There is already a drop in solution for that from next-auth. You need to search for the MongoDB Adapter in their docs. This might spare you some trouble later on.