US15 - Authentication (Login)

[Hendrik-Pils]

Value Proposition

As a user
I want to be able to login to the Reuse app via Github e.g.
In order to do that functions like the isFavorite-function should be exclusive to me as a logged in user

Acceptance Criteria

• A user login to the Reuse app via Github is possible
• After successful login, the user is getting redirected to the landing page

Inside the header:

• A login button is visible and turns into a logout button when the user is logged in
• A text next to the login button is showing "Signed in as Username" or "Not logged in"

Tasks

• Install NextAuth via npm
• Create a OAuth-app in Github
• Set the callback url in the OAuth-app
• Save the client id and secret id from the OAuth-app in the .env.local.-file
• Create a file "[...nextauth].js" under the route "/api/auth/[...nextauth].js" and add the NextAuth config to it
• Wrap the SessionProvider around the pages/_app.jsx
• The hooks useSession, signIn and signOut from NextAuth are implemented in the AuthButton component
• The session can be accessed via "const { data: session } = useSession()"
• Implement a login button and "Signed in as Username"/"Not signed in" text in the header

[kevinldg]

Note:

Two OAuth apps, each with one client id and one secret id have been created on GitHub. One for production, one for development.

Client ID, Secret ID (Production) -> Vercel
Client ID, Secret ID (Development) -> .env.local. File

The reason for this is that an OAuth app on GitHub only allows one callback URL.