Cannot login to App even though tests pass

Tell us what’s happening:
My code passes all the tests but I cannot login to the App as suggested by the prompt for the problem and various YouTube solution videos. Even copying and pasting the solution directly into Glitch still generates the same error. When I click on the “Login with Github” link, it goes to a page that looks like the following, stating that “This content is blocked. Contact the site owner to fix the issue.”

I’ve tried opening up the Glitch on Chrome, Safari, and Firefox - Chrome generates the screenshot stated above when I attempt to Login with Github, and Safari and Firefox just doesn’t direct me anywhere (ie it doesn’t go to Github authentication), and I have no idea why. Any help would be greatly appreciated!

Your project link(s)
package.json

{
  "//1": "describes your app and its dependencies",
  "//2": "https://docs.npmjs.com/files/package.json",
  "//3": "updating this file will download and update your packages",
  "name": "fcc-advanced-node-and-express",
  "author": "http://github.com/JosephLivengood",
  "version": "0.0.1",
  "description": "What am I about?",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.16.1",
    "mongodb": "^3.6.1",
    "node": "12.18.0",
    "pug": "~3.0.0",
    "passport": "^0.3.2",
    "express-session": "^1.15.0",
    "passport-local": "1.0.0",
    "passport-github": "^1.1.0",
    "bcrypt": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://glitch.com/#!/project/welcome-project"
  },
  "keywords": [
    "node",
    "express",
    "pug",
    "passport",
    "socketio"
  ],
  "license": "MIT",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

server.js

'use strict';
require('dotenv').config();
const routes = require('./routes.js'); 
const auth = require('./auth.js'); 

const express = require('express');
const bcrypt = require('bcrypt');
const myDB = require('./connection');
const fccTesting = require('./freeCodeCamp/fcctesting.js');
const session = require('express-session');
const passport = require('passport');
const ObjectID = require('mongodb').ObjectID;
const LocalStrategy = require('passport-local');
const GitHubStrategy = require('passport-github').Strategy;

const app = express();
app.set('view engine', 'pug');

fccTesting(app); // For fCC testing purposes
app.use('/public', express.static(process.cwd() + '/public'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(session({
  secret: process.env.SESSION_SECRET,
  resave: true,
  saveUninitialized: true,
  cookie: { secure: false }
}));

app.use(passport.initialize());
app.use(passport.session());

myDB(async (client) => {
  const myDataBase = await client.db('database').collection('users');
  routes(app, myDataBase);
  auth(app, myDataBase);
}).catch((e) => {
  app.route('/').get((req, res) => {
    res.render('pug', { title: e, message: 'Unable to login' });
  });
});

app.listen(process.env.PORT || 3000, () => {
  console.log('Listening on port ' + process.env.PORT);
});

routes.js

require('dotenv').config();
const passport = require('passport');
const bcrypt = require('bcrypt');

module.exports = function (app, myDataBase) {
  app.route('/').get((req, res) => {
    // Change the response to render the Pug template
    res.render('pug', { 
      title: 'Connected to Database', 
      message: 'Please login', 
      showLogin: true, 
      showRegistration: true, 
      showSocialAuth: true });
  });
  app.route('/login').post(passport.authenticate('local', { failureRedirect: '/' }), (req, res) => {
    res.redirect('/profile');
  });
  app.route('/profile').get(ensureAuthenticated, (req, res) => {
    res.render('pug/profile', { username: req.user.username });
  });
  app.route('/logout').get((req, res) => {
    req.logout();
    res.redirect('/');
  });
  app.route('/register').post(
    (req, res, next) => {
      const hash = bcrypt.hashSync(req.body.password, 12);
      myDataBase.findOne({ username: req.body.username }, function (err, user) {
        if (err) {
          next(err);
        } else if (user) {
          res.redirect('/');
        } else {
          myDataBase.insertOne({ username: req.body.username, password: hash }, (err, doc) => {
            if (err) {
              res.redirect('/');
            } else {
              next(null, doc.ops[0]);
            }
          });
        }
      });
    },
    passport.authenticate('local', { failureRedirect: '/' }),
    (req, res, next) => {
      res.redirect('/profile');
    }
  );

  app.route('/auth/github').get(passport.authenticate('github'));
  app.route('/auth/github/callback').get(passport.authenticate('github', { failureRedirect: '/' }), (req, res) => {
    res.redirect('/profile');
  });

  app.use((req, res, next) => {
    res.status(404).type('text').send('Not Found');
  });
};

function ensureAuthenticated(req, res, next) {
  if (req.isAuthenticated()) {
    return next();
  }
  res.redirect('/');
}

auth.js

const passport = require('passport');
const LocalStrategy = require('passport-local');
const bcrypt = require('bcrypt');
const ObjectID = require('mongodb').ObjectID;
const GitHubStrategy = require('passport-github').Strategy;

module.exports = function (app, myDataBase) {
  passport.serializeUser((user, done) => {
    done(null, user._id);
  });
  passport.deserializeUser((id, done) => {
    myDataBase.findOne({ _id: new ObjectID(id) }, (err, doc) => {
      if (err) return console.error(err);
      done(null, doc);
    });
  });
  passport.use(new LocalStrategy(
    function (username, password, done) {
      myDataBase.findOne({ username: username }, function (err, user) {
        console.log('User ' + username + ' attempted to log in.');
        if (err) { return done(err); }
        if (!user) { return done(null, false); }
        if (!bcrypt.compareSync(password, user.password)) { return done(null, false); }
        return done(null, user);
      });
    }
  ));

  passport.use(new GitHubStrategy({
      clientID: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
      callbackURL: 'https://materialistic-brass-reminder.glitch.me/auth/github/callback'
    },
    function (accessToken, refreshToken, profile, cb) {
      console.log(profile);
      myDataBase.findAndModify(
        { id: profile.id },
        {},
        {
          $setOnInsert: {
            id: profile.id,
            name: profile.displayName || 'John Doe',
            photo: profile.photos[0].value || '',
            email: Array.isArray(profile.emails) ? profile.emails[0].value : 'No public email',
            created_on: new Date(),
            provider: profile.provider || ''
          },
          $set: {
            last_login: new Date()
          },
          $inc: {
            login_count: 1
          }
        },
        { upsert: true, new: true },
        (err, doc) => {
          return cb(null, doc.value);
        }
      );
    }
  ));
};

solution: https://materialistic-brass-reminder.glitch.me

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.

Challenge: Implementation of Social Authentication III

Link to the challenge:

Hello there,

I do not know what is wrong, but here are some initial thoughts:

  • Recently, we have encountered issues with the Auth provider: 504 Gateway Time-out - Issues with Sign in - #15 by raisedadead - I cannot see how this is related, but it came into my head. That is, if GitHub also rely on the same provider, there may be issues.
  • Have you ensured to enter the correct information into the GitHub OAuth (on your account)?
  • Did you see anything in the console.log(profile)?

Thanks for the quick turnaround:
1 - thanks for flagging, will take a look
2 - yes, I even created a new OAuth app and updated the information accordingly in env to make sure it wasn’t a OAuth problem
3 - nothing in console.log(profile), unfortunately.

Something does appear to be wrong on the GitHub side:

But, after being directed back to the welcome page, I clicked the Login with GitHub buttons again, and managed to login:

Unfortunately I’m unable to replicate your errors (I don’t get redirected to the welcome page) because my Glitch is blocking Github for some reason:

I’m googling to find a way to resolve the above but if you might know what the solution is that would be super helpful!

Additionally, when you mentioned “Something does appear to be wrong on the GitHub side” - do you mean Github itself has issues or there may be something I can personally do to fix this issue on Github? I’m still not sure what that may be and I’ve been trying to fix this for a few hours …

Thank you again!

Hi! Just wanted to state that I figured this out - turns out it’s a Glitch problem, not a Github problem, as further detailed here - Content Security Policy and iframe integration - Glitch Help - Glitch Support. The problem does not appear if you show the app in a new window (as opposed to “Next to the Code”). Thank you again!