👨‍💻 Using Render.com for GitHub OAuth Integration

Howdy developers! 🌟

Are you looking for a hassle-free way to set up GitHub OAuth for your applications? Whether you're building a Chrome Extension, a web app, or any other project that requires secure authentication, Render.com provides an easy and cost-effective solution for hosting your OAuth backend. Let's get started! 🚀

---

🔍 Why Use Render for OAuth?

1. Free Tier: Ideal for small projects and prototypes.
2. Simple Setup: Deploy your backend in just a few clicks.
3. Auto-Deploy from GitHub: Automatically updates your backend when you push code.
4. Secure and Reliable: HTTPS support out of the box.

---

🔧 Setting Up GitHub OAuth with Render

1. Create Your OAuth Backend 🛠️

1. Initialize a Node.js project:

   npm init -y
   npm install express axios cors dotenv

1. Create a server.js file:

   require('dotenv').config();
   const express = require('express');
   const axios = require('axios');
   const cors = require('cors');

   const app = express();
   const PORT = process.env.PORT || 3000;

   app.use(cors());
   app.use(express.json());

   const CLIENT_ID = process.env.GITHUB_CLIENT_ID;
   const CLIENT_SECRET = process.env.GITHUB_CLIENT_SECRET;

   app.post('/auth/github', async (req, res) => {
     const { code } = req.body;
     if (!code) return res.status(400).json({ error: 'Authorization code missing' });

     try {
       const tokenResponse = await axios.post(
         'https://github.com/login/oauth/access_token',
         { client_id: CLIENT_ID, client_secret: CLIENT_SECRET, code },
         { headers: { Accept: 'application/json' } }
       );

       const accessToken = tokenResponse.data.access_token;
       const userResponse = await axios.get('https://api.github.com/user', {
         headers: { Authorization: `token ${accessToken}` },
       });

       res.json({ access_token: accessToken, github_username: userResponse.data.login });
     } catch (error) {
       res.status(500).json({ error: 'OAuth flow failed', details: error.message });
     }
   });

   app.listen(PORT, () => console.log(`✅ Server running on port ${PORT}`));

1. Create a .env file:

   GITHUB_CLIENT_ID=your_client_id
   GITHUB_CLIENT_SECRET=your_client_secret

1. Push Your Code to GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/yourusername/your-repo.git
   git push -u origin main

---

2. Deploy on Render.com 🚀

1. Sign Up/Log In to Render.com.
2. Click "New Web Service" and connect your GitHub.

3. Select your repository and configure:

   • Environment: Node
   • Build Command: npm install
   • Start Command: node server.js

4. Add Environment Variables in Render:

   • GITHUB_CLIENT_ID: Your GitHub OAuth Client ID
   • GITHUB_CLIENT_SECRET: Your GitHub OAuth Client Secret

5. Click "Deploy" and your backend will be live! 💥

---

3. Configure GitHub OAuth Settings 🔄

1. Go to your GitHub Developer Settings.

2. Edit your OAuth App:

   • Authorization Callback URL:

    https://your-render-app.onrender.com/auth/github
   

---

🎉 Done! What's Next?

1. Integrate with your front-end or Chrome Extension.
2. Test the OAuth flow by logging in with GitHub.
3. Expand your app with more GitHub API integrations!

---

🚀 Final Thoughts

Using Render.com for hosting your OAuth backend is quick, easy, and free for small projects. It’s a great way to manage secure authentication without worrying about complex server setups.

Have you tried deploying OAuth on Render? Share your experiences or ask questions in the comments! 👇

Happy coding! 💻💚

---

Follow me on LinkedIn | Codewars | LeetCode | Behance

Check out the full source code on GitHub!