# 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 O-Auth-App at GitHub and create an .env.local file and add the following:
  • 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
• [ ] Create API Route and configure it.
• [ ] Provide Session contextand expose it at the top level of the application (e.g. _app.js).
• [ ] render the Login component inside Layout component.

[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