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

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

Inside the header:

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

Tasks

• [x] Install NextAuth via npm
• [x] Create a OAuth-app in Github
• [x] Set the callback url in the OAuth-app
• [x] Save the client id and secret id from the OAuth-app in the .env.local.-file
• [x] Create a file "[...nextauth].js" under the route "/api/auth/[...nextauth].js" and add the NextAuth config to it
• [x] Wrap the SessionProvider around the pages/_app.jsx
• [x] The hooks useSession, signIn and signOut from NextAuth are implemented in the AuthButton component
• [x] The session can be accessed via "const { data: session } = useSession()"
• [x] 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.