CODEWITHSUNDEEP
oauth-2.0next.js
WebDevKun
WebDevKun

Reputation: 41

Using Oauth 2.0 with Next js

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>

Upvotes: 3

Views: 5332

Answers (2)

Manny
Manny

Reputation: 171

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!

Upvotes: 0

Harsha Murupudi
Harsha Murupudi

Reputation: 573

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

Upvotes: 2

Related Questions