How to Add Google Login to Next.js with Authon

Introduction

Adding social login to your application is one of the fastest ways to reduce sign-up friction. Google Login alone can increase conversion rates by 20-30% compared to email/password forms.

In this tutorial, we'll walk through integrating Google OAuth into a Next.js 15 application using the Authon SDK. By the end, you'll have a fully working login flow with session management.

Prerequisites

Node.js 20+
A Next.js 15 project
An Authon account (free tier works)
Google Cloud Console access

Step 1: Create an Authon Project

Head to authon.dev and create a new project. Once created, grab your Project ID and API Key from the dashboard.

Step 2: Configure Google OAuth

In the Authon dashboard, navigate to Authentication > Providers and enable Google. You'll need to provide:

Google Client ID
Google Client Secret

You can get these from the Google Cloud Console. Make sure to add your redirect URI:

bash

https://your-app.com/api/auth/callback/google

Step 3: Install the SDK

Install the Authon Next.js SDK:

bash

npm install @authon/nextjs

Step 4: Configure the Provider

Wrap your application with the Authon provider in your root layout:

tsx

import { AuthonProvider } from '@authon/nextjs'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AuthonProvider
          projectId={process.env.NEXT_PUBLIC_AUTHON_PROJECT_ID}
        >
          {children}
        </AuthonProvider>
      </body>
    </html>
  )
}

Step 5: Add the Login Button

Now add a Google login button to your page:

tsx

'use client'

import { useAuthon } from '@authon/nextjs'

export default function LoginPage() {
  const { signIn, user, isLoading } = useAuthon()

  if (isLoading) return <div>Loading...</div>
  if (user) return <div>Welcome, {user.name}!</div>

  return (
    <button onClick={() => signIn('google')}>
      Sign in with Google
    </button>
  )
}

Step 6: Handle the Callback

Create the API route to handle the OAuth callback:

typescript

// app/api/auth/[...authon]/route.ts
import { createAuthonHandler } from '@authon/nextjs/server'

export const { GET, POST } = createAuthonHandler({
  secret: process.env.AUTHON_SECRET,
})

Step 7: Protect Routes

Use middleware to protect authenticated routes:

typescript

// middleware.ts
import { withAuth } from '@authon/nextjs/middleware'

export default withAuth({
  protectedRoutes: ['/dashboard', '/settings'],
  loginPage: '/login',
})

Session Management

Authon handles session management automatically. Sessions are stored as secure HTTP-only cookies with the following defaults:

Duration: 30 days
Refresh: Automatic silent refresh
Security: HTTP-only, Secure, SameSite=Lax

You can customize these in your Authon dashboard under Settings > Sessions.

Going to Production

Before deploying, make sure to:

Set your production domain in the Authon dashboard

Update your Google OAuth redirect URIs

Set all environment variables in your hosting provider

Enable rate limiting in Authon settings

Conclusion

With just a few lines of code, you've added Google Login to your Next.js application. Authon handles the complexity of OAuth flows, token management, and session handling so you can focus on building your product.

Check out the Authon documentation for more providers, advanced features, and best practices.