Implementing OAuth 2.0 in Full Stack Apps with Google and GitHub

Posted on by admin

When users visit your app, they usually need to sign in. Creating a login system from scratch can take time and may not always be secure. That’s why many apps today allow users to log in using services like Google or GitHub. This is done using a system called OAuth 2.0.

OAuth 2.0 is a safe and simple way for users to log in to your app using their existing accounts. Instead of creating new usernames and passwords, they just click “Sign in with Google” or “Sign in with GitHub.” This makes logging in faster and easier for users—and safer for you as a developer.

Learning how to set up OAuth 2.0 is important if you’re building full-stack web applications. It’s a skill that’s often covered in a good full stack java developer training because it’s widely used in real-world projects and makes apps more user-friendly.

What is OAuth 2.0?

OAuth 2.0 is a way to let users give limited access to their data without sharing their passwords. For example, if a user logs in with their Google account, Google confirms their identity and gives your app a special access token. This token proves the user is logged in, but it doesn’t give full access to their account.

Your app never sees the user’s Google or GitHub password. Instead, it receives this secure token and uses it to allow the user to access the app. This makes OAuth 2.0 both safe and reliable.

How OAuth 2.0 Works in Full Stack Apps

Here’s a simple breakdown of how OAuth 2.0 works when a user logs in:

  1. The user clicks a “Login with Google” or “Login with GitHub” button.
  2. They are turned to the provider’s login page (Google or GitHub).
  3. The user logs in and gives permission to your app.
  4. The provider transmits an access token back to your app.
  5. Your app uses this token to verify the user and start a session.

This may seem like a lot of steps, but most of them are handled by libraries and tools that make OAuth easy to use.

Tools You Can Use

For Node.js and Express apps, you can use the Passport.js library. It has strategies for both Google and GitHub. These strategies are like plugins that help you connect to each service.

For frontend apps, especially in React, you can use packages like react-oauth/google or set up your own API to handle authentication.

Here’s a general list of what you’ll need:

  • A Google or GitHub developer account
  • Client ID and Secret from the provider
  • A backend server (like Node.js with Express)
  • A frontend (like React or plain HTML/CSS/JavaScript)

In many full stack developer classes, students get to work on projects where they implement OAuth 2.0 as part of a login system. This helps them understand both the frontend and backend flow.

Setting Up Google OAuth 2.0

To use Google OAuth, follow these steps:

  1. Go to the Google Developer Console.
  2. Create a new project.
  3. Enable the Google+ API or OAuth API.
  4. Create OAuth credentials.
  5. Add your authorized redirect URIs (like http://localhost:3000/auth/google/callback).
  6. Get your Client ID and Client Secret.

Here’s an example of using Passport.js with Google:

const passport = require(‘passport’);

const GoogleStrategy = require(‘passport-google-oauth20’).Strategy;

passport.use(new GoogleStrategy({

    clientID: ‘YOUR_GOOGLE_CLIENT_ID’,

    clientSecret: ‘YOUR_GOOGLE_CLIENT_SECRET’,

    callbackURL: “/auth/google/callback”

  },

  function(accessToken, refreshToken, profile, done) {

    // Save user info to your database

    return done(null, profile);

  }

));

This code sets up the Google strategy. When a user logs in, Google sends back their profile, and you can then save it to your database.

Setting Up GitHub OAuth 2.0

GitHub OAuth is similar. To begin:

  1. Go to GitHub and log into your account.
  2. Visit developer settings and create a new OAuth app.
  3. Set the application name and homepage URL.
  4. Add the callback URL (like http://localhost:3000/auth/github/callback).
  5. Copy your Client ID and Client Secret.

Here’s an example of using GitHub with Passport.js:

const GitHubStrategy = require(‘passport-github2’).Strategy;

passport.use(new GitHubStrategy({

    clientID: ‘YOUR_GITHUB_CLIENT_ID’,

    clientSecret: ‘YOUR_GITHUB_CLIENT_SECRET’,

    callbackURL: “/auth/github/callback”

  },

  function(accessToken, refreshToken, profile, done) {

    // Save user info to your database

    return done(null, profile);

  }

));

This will permit users to sign in with their GitHub accounts. Just like with Google, the user’s information is returned, and your app can use it to log them in.

Frontend Integration

Once your backend is set up with OAuth, you need to handle the frontend. The frontend usually has buttons that direct users to the backend OAuth route.

For example:

<a href=”/auth/google”>Login with Google</a>

<a href=”/auth/github”>Login with GitHub</a>

When users click these links, they are taken through the OAuth flow and then redirected back to your app. You can use cookies or JWT tokens to manage the session on the frontend after they log in.

These skills are very useful when building modern full stack applications, and they are often taught in a good full stack developer course because they help students build real login systems that users expect today.

Protecting Routes After Login

Once a user is logged in, you’ll want to protect certain pages or actions. This means only logged-in users can access them.

In Express, you can do this with middleware:

function isLoggedIn(req, res, next) {

  if (req.isAuthenticated()) return next();

  res.redirect(‘/login’);

}

Then use this middleware to protect routes:

app.get(‘/dashboard’, isLoggedIn, (req, res) => {

  res.send(‘Welcome to your dashboard!’);

});

This ensures only authenticated users can view the dashboard or other protected pages.

Why OAuth 2.0 is Better Than Traditional Logins

Traditional login systems require you to:

  • Store passwords (which can be risky)
  • Set up password reset systems
  • Handle spam or fake accounts

With OAuth:

  • You don’t store any passwords
  • The login process is quick for users
  • Users trust providers like Google and GitHub

OAuth makes life easier for both users and developers. That’s why many modern apps use it.

In many full stack java developer course, students learn to compare these login systems and often build both, which helps them understand the pros and cons of each method.

Final Thoughts

Adding OAuth 2.0 to your full stack app may sound tricky at first, but with the right tools, it becomes simple. By using services like Google and GitHub, you allow users to sign in quickly and securely.

From setting up developer accounts to writing backend code and protecting routes, the whole process teaches you a lot about how real apps work. OAuth is used in almost every modern web application today.

If you’re looking to improve your web development skills and build apps with secure login systems, learning OAuth 2.0 is a must. These concepts are usually included in any good developer course, especially those that focus on real-world application building.

Once you understand how OAuth works, you’ll be able to add login features that users already know and trust. It’s a small feature that makes a big impact on user experience—and helps keep your app secure.

Contact Us:

Name: ExcelR – Full Stack Developer Course in Hyderabad

Address: Unispace Building, 4th-floor Plot No.47 48,49, 2, Street Number 1, Patrika Nagar, Madhapur, Hyderabad, Telangana 500081

Phone: 087924 83183

Related Posts