Github Authentication
by Tomas Trescak· Authentication and Authorisation

0 / 1750 XP

You worked so hard to make your application and you probably want others to use it as well! But you do not want to mix up tasks from different users. Thus, you need to authenticate them by creating secure accounts. But … solving authentication is HARD! Even today, the internet is full of tutorials on creating an efficient authentication system … with questionable results. Moreover, storing passwords and accounts in your database is prone to hacking attempts, taking on a lot of responsibility (looking at you, password re-users 🧐).

Luckily, most internet users use big service providers such as Google, Facebook, Instagram, and Github … and we can use their infrastructure to authenticate users. For this purpose, we will use the incredibly powerful library NextAuth providing access to 40+ authentication services. In the upcoming assignment, you will set up your application to use Github authentication, and in this part, we will set up your Github account to allow your application use this service.

Github

  1. Log in to Github.com
  2. In the top right part of the screen, click on your avatar and then on “Settings”

    Avatar Location
  3. In the left menu at the very bottom, find “Develop Settings”, click on it

  4. Click on “OAuthApps” and then “New OAuth App

  5. Please fill out this form using the values below

  6. Click on “Register Application”
  7. A new page will open, not down the ClientID in a secure location
  8. Click on Generate a new client secret

  9. This will generate a new secret. Copy its value to the same secure location as your ClientID. You will not be able to see this key again!

  10. Done! You now have GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET that you will need to set up authentication in your application

Time for an exercise!

[https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/FW6NyGHNKkvM7w1r1k/logo-sm.png] You worked so hard to make your application and you probably want others to use it as well! But you do not want to mix up tasks from different users. Thus, you need to authenticate them by creating secure accounts. But … solving authentication is HARD! Even today, the internet is full of tutorials on creating an efficient authentication system … with questionable results. Moreover, storing passwords and accounts in your database is prone to hacking attempts, taking on a lot of responsibility (looking at you, password re-users 🧐). Luckily, most internet users use big service providers such as Google, Facebook, Instagram, and Github … and we can use their infrastructure to authenticate users. For this purpose, we will use the incredibly powerful library NextAuth [https://next-auth.js.org] providing access to 40+ authentication services. In the upcoming assignment, you will set up your application to use Github authentication, and in this part, we will set up your Github account to allow your application use this service. GITHUB 1. Log in to Github.com 2. In the top right part of the screen, click on your avatar and then on “Settings” [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/FW6NyGHNKkvM7w1r1k/Screenshot%202024-04-26%20at%2015.12.54.png]Avatar Location 3. In the left menu at the very bottom, find “Develop Settings”, click on it [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/FW6NyGHNKkvM7w1r1k/Screenshot%202024-04-26%20at%2015.15.09.png] 4. Click on “OAuthApps” and then “New OAuth App” [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/FW6NyGHNKkvM7w1r1k/Screenshot%202024-04-26%20at%2015.16.57.png] 5. Please fill out this form using the values below [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/full-stack-development-comp3036-2025/sections/github-authentication-in-authentication-and-authorisation/image.png] 6. Click on “Register Application” 7. A new page will open, not down the ClientID in a secure location 8. Click on Generate a new client secret [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/FW6NyGHNKkvM7w1r1k/Screenshot%202024-04-26%20at%2015.22.06.png] 9. This will generate a new secret. Copy its value to the same secure location as your ClientID. You will not be able to see this key again! [https://skillpies.s3.ap-southeast-2.amazonaws.com/courses/3myFj3C3s45Lw7am7p/sections/FW6NyGHNKkvM7w1r1k/Screenshot%202024-04-26%20at%2015.23.28.png] 10. Done! You now have GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET that you will need to set up authentication in your application Time for an exercise!
Maggie

Discuss with Maggie
Use the power of generative AI to interact with course content

Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners

Join the discussion to ask questions, share your thoughts, and discuss with other learners
Setup
React Fundamentals
10 points
Next.js
10 points
Advanced React
Databases
10 points
React Hooks
Authentication and Authorisation
10 points
APIs
CI/CD and DevOps
Testing React
Advanced Topics