Using Oauth 2.0 with Next js

Question

I want to use Google OAuth 2.0 with my React/Next.js app. I've set up my OAuth Client IDs on the Google Developer console, and set up a route in my server.js node file. When I try to GET request https://localhost:3000/auth/google I get the Next js 404 Not Found page. It's obviously looking for a page called auth in my Next js pages directory. Tried using the next/Router, wrapping my button in an anchor element, fetch API GET requesting https://localhost:3000/auth/google, all failed.

I've managed to successfully implement passport user authentication, salting, hashing and sessions but it's just the Oauth that's giving me trouble.

If it were a standard node application https://localhost:3000/auth/google would redirect to the interface where users could login with their google credentials.

I've tried search the nextjs examples github for implementations of oauth but there doesn't seem to be any. Anyone know how I can use OAuth 2.0 with Next JS?

Route

server.get("/auth/google", (req, res) =>{
   passport.authenticate("google", { scope: ['profile']});
})

Button that's supposed to take me to the google login/register page

<button className="btn btn-block btn-social btn-google" style={{'color': '#fff'}} onClick={() => Router.push("/auth/google")}>
<FontAwesomeIcon icon={faGoogle} className="google-social-button" /> Sign Up with Google
</button>

Harsha Murupudi · Accepted Answer · 2019-07-24 08:07:58Z

2

You can simply try this,

const app = next({ dev });
const server = express()

server.get('/auth/google/callback*',
    passport.authenticate('google'),
(req, res) => {
    res.redirect('/dashboard');
});

server.get('/auth/google*', (req, res) => {
    return app.render(req, res, req.path, req.query)
});

server.get('/api/logout', (req, res) => {
    req.logout();
    res.send(req.user);
})

server.get('/api/current_user', (req, res) => {
    res.send(req.user);
});

server.get('*', (req, res) => {
   return handle(req, res)
});

Just make sure the google reqs are above the server.get('*') route as it catches all requests. More help: https://github.com/zeit/next.js/blob/canary/examples/custom-server-express/server.js

answered Jul 24, 2019 at 8:07

Harsha Murupudi

5711 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manny · Accepted Answer · 2020-05-25 01:38:50Z

Not sure if you're still looking for an answer here, but if are, you can do something like the following under the latest Next.js version (9+), https://nextjs.org/blog/next-9#api-routes

//--- PART 1: DEFINE YOUR GOOGLE OAUTH STRATEGY ALA PASSPORT // This would be in its own passport.js file (the filename doesn't matter), the key thing being that you define your Google Strategy

import passport from 'passport'
import {
  Strategy as GoogleStrategy,
} from 'passport-google-oauth20'

passport.use(new GoogleStrategy({
  ...getGoogleKeySecret(), // a utility for grabbing your secret keys
  callbackURL: `/api/authorize/google/callback`,
  passReqToCallback: true, // http://www.passportjs.org/docs/authorize/
}, async function(req, accessToken, refreshToken, profile, done) {
    // Do any user lookup/mapping you need here
    return done(null, profile)
}))

//--- PART 2: DEFINE THE END-POINT // This would be in your pages/api/auth/google.js file

import nextConnect from 'next-connect'
import middleware from '../any/custom/middleware/stuff/you/may/have'

const handler = nextConnect()

handler.use(middleware)

handler.get(passport.authenticate("google", {
  scope: ['profile', 'email', 'openid'], // tailer the scope to fit your needs
}))

export default handler

To try it out, direct a user to /api/auth/google via your UI or hit the URL directly, and you should be taken through the Google OAuth 2.0 flow.

Hope this helps - good luck!

Collectives™ on Stack Overflow

Using Oauth 2.0 with Next js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related