# User Login

[SylvieDoumet]

Value Proposition

As a user, I want to log into my account securely, In order to access personalized content of the natural cures app.

Description

Acceptance criteria

• [ ] The "Login" button is easily accessible to the user.
• [ ] Clicking the "Login" button redirects the page log in.
• [ ] The user can enter their GitHub username and password or Google account credentials to authenticate.
• [ ] After successful authentication, the user is redirected back to the web app, and a session is created.
• [ ] If authentication is denied, an error message is displayed: "Login failed. Please try again."
• [ ] The user can log out of the web app at any time using the "Logout" button,
• [ ] The system is asking whether user want to stay logged out or cancel.

Tasks

• [ ] Create feature branch feature/login
• [ ] managed by NextAuth.js. Please read carefully.
• [ ] Create the login page layout and UI components.
• [ ] Register two GitHub OAuth Apps:
  • One for the production environment (main branch of the project).
  • One for review deployments (for pull requests).
  • Each OAuth App must be configured with a unique URL where the authentication requests are sent.
• [ ] Create an .env.local file with the following keys:
  • GITHUB_SECRET=this should be the CLIENT SECRET
  • NEXTAUTH_URL=this should be the URL of your application, localhost or vercel deployment
    • NEXTAUTH_SECRET=this can be any random string)
• [ ] Install NextAuth
• [ ] Configure the API route for handling the authentication.
• [ ] Provide Session contextand expose it at the top level of the application (e.g. _app.js).
• [ ] render the Login component inside Layout component.
• [ ] Adjust the GitHub OAuth App URL for each pull request (PR):
  • Before merging a PR, ensure that the Review Deployment URL is correctly configured in the OAuth App.
  • Only one active PR can be authenticated at a time due to the unique URL requirement for each OAuth App.

[SylvieDoumet]

Rahaf kannst du bitte das Layout dieser User story anpassen - da du sie geschrieben hast würde ich das gerne dir überlassen :-)

[F-Kirchhoff]

Hey Susan, die US schaut super aus, nur der letzte Task ist ein wenig schwammig, was meinst du mit render the component inside component? Zusätzlich solltet ihr mindestens 2 Github OAuth Apps erstellen, eins für eure production Umgebung, also den Main branch eures Projekts und ein zweites, dass auf die einzelnen Review Deployments angepasst werden kann. Die OAuth Apps brauchen nämlich eine eindeutige URL and die die Auth requests gesendet werden können, und die Adresse von dem Review Deployment ändert sich ja mit jedem PR. Deshalb müsst ihr für jeden PR die URL in dieser OAuth App anpassen :/ (und könnt natürlich nur einen aktiven PR zur Zeit haben).

[Rahaf91]

Thank you for reviewing. Both the login and layout components were enclosed in angle brackets, which is why they weren't displayed...We updated it

[rvoll]

Hi Rahaf & Susan & ..., Looks great - like the rest pf your page! Only the wireframes are a bit sloppy: from the wireframes it is not clear to me what triggers the "Please log in" message. You could make this more obvious. The "Login failed. Please try again." is not included in the wire frames. Anyway, this is a minor issue. Keep it going.

[Sannsfilm]

@rvoll i will updated for the layout, thankyou for review :))