Authorization Code Grant

Authenticate users using an authorization server.

The Authorization Code Grant redirects the user to the authorization server, in this case Drupal, for authentication.

The user will then be asked to login to the authorization server and approve the client.

Demo

See https://example-auth.next-drupal.org/.

Flow

  1. User is redirected to the Drupal site for authentication.
  2. User provides their username and password on the Drupal site.
  3. User approves client.
  4. User is redirected back to the Next.js site (authenticated) with the authorization code.

Dependencies

Add next-auth and jwt_decode to your Next.js site.

yarn add next-auth@beta jwt_decode

We are using NextAuth.js 4 beta in the examples but the stable 3.x release works as well (with a few tweaks).

Installation

Drupal

Create a new OAuth consumer:

  1. Visit /admin/config/services/consumer/add
  2. Fill in Label and Secret.
  3. Use http://localhost:3000/api/auth/callback/drupal for the Redirect URI.
  4. Click Save

Give Authenticated users permission to Grant OAuth2 codes.

  1. Visit /admin/people/permissions
  2. Check Grant OAuth2 codes for Authenticated user.
  3. Click Save permissions.

Next.js

  1. Fill in the following in your .env:
OAUTH_CLIENT_ID= // The Consumer UUID created above. OAUTH_CLIENT_SECRET= // The Client secret you added above. NEXTAUTH_URL=http://localhost:3000 // The base url for your Next.js site JWT_SIGNING_PRIVATE_KEY= // Generate one using `jose newkey -s 512 -t oct -a HS512`
  1. Update your _app.tsx and wrap Component in a `SessionProvider.

pages/_app.tsx

import { AppProps } from "next/app"
import { SessionProvider } from "next-auth/react" 


export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}
  1. Create the following API route /pages/api/auth/[...nextauth].js.

pages/api/auth/[...nextauth].js

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import jwt_decode from "jwt-decode"


export default NextAuth({
  providers: [
    {
      id: "drupal",
      name: "Next.js for Drupal",
      type: "oauth",
      version: "2.0",
      token: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/token`,
      authorization: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/authorize?response_type=code`,
      userinfo: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/userinfo`,
      async profile(profile) {
        return {
          id: profile.sub,
          username: profile.preferred_username,
          email: profile.email,
        }
      },
      clientId: process.env.OAUTH_CLIENT_ID,
      clientSecret: process.env.OAUTH_CLIENT_SECRET,
    },
  ],
  jwt: {
    signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,
    encryption: true,
  },
  callbacks: {
    async jwt({ token, user }) {
      // Forward the access token.
      if (user) {
        token.accessToken = user.access_token
      }


      return token
    },
    async session({ session, token }) {
      if (token?.accessToken) {
        session.accessToken = token.accessToken
      }
      return session
    },
  },
})
  1. If you visit /api/auth/signin you should now see the credentials authentication form.
NextAuth.js Authorization Sign In
NextAuth.js Authorization Sign In

You can use this form to sign in.

The /api/auth/signin pages is a pre-built page that comes with NextAuth.js. If you would like to provide your own custom login page, see the documentation.

useSession

To handle authentication in your Next.js components, you can use the useSession hook.

import { useSession } from "next-auth/react"


export default function Page() {
  const { data, status } = useSession()


  if (status === "authenticated") {
    return <p>Signed in as {data.user.email}</p>
  }


  return <a href="/api/auth/signin">Sign in</a>
}

Additional information

Drupal

When using the Authorization Code Grant, you can implement the hook_simple_oauth_oidc_claims_alter hook to pass additional information to the session.

<?php


/**
 * Implements hook_simple_oauth_oidc_claims_alter().
 */
function example_auth_simple_oauth_oidc_claims_alter(array &$claim_values, array &$context) {
  $account = $context['account'];
  $claim_values['field_name'] = $account->get('field_name')->value; 
}

Next, edit your services.yml (under sites/default) file with the following:

sites/default/services.yml

parameters:
  simple_oauth.openid.claims:
    - sub
    - name
    - preferred_username
    - email
    - email_verified
    - locale
    - profile
    - updated_at
    - zoneinfo
    - field_name

Next.js

Then update your profile callback as follows:

{
    id: "drupal",
    name: "Next.js for Drupal",
    type: "oauth",
    version: "2.0",
    token: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/token`,
    authorization: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/authorize?response_type=code`,
    userinfo: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/userinfo`,
    async profile(profile) {
        return {
            id: profile.sub,
            username: profile.preferred_username,
            email: profile.email,
            field_name: profile.field_name, 
        }
    },
    clientId: process.env.OAUTH_CLIENT_ID,
    clientSecret: process.env.OAUTH_CLIENT_SECRET,
},

TypeScript

If you're using TypeScript, you can augment the User type with the additional information.

types/next-auth.d.ts

import { DefaultSession, Session } from "next-auth"


declare module "next-auth" {
  interface Session {
    user?: DefaultSession["user"] & {
      field_name?: string
    }
  }
}
Introduction