Password Grant

Authenticate users using username and password.

The Password Grant allows users to authenticate using their credentials i.e. their username and password.

Demo

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

Flow

User provides their username and password on your Next.js site.
The username and password is sent via POST request to the API route `/api/auth/callback/credentials`.
We then send the credentials to the authorization server (Drupal) for authentication (server-side).
We get back an `access_token` for successful authentication.

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:

Visit /admin/config/services/consumer/add
Fill in Label and Secret.
Click Save

Next.js

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`

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>
  )
}

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: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "Username" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const formData = new URLSearchParams()
        formData.append("grant_type", "password")
        formData.append("client_id", process.env.OAUTH_CLIENT_ID)
        formData.append("client_secret", process.env.OAUTH_CLIENT_SECRET)
        formData.append("username", credentials.username)
        formData.append("password", credentials.password)

        // Get access token from Drupal.
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/oauth/token`,
          {
            method: "POST",
            body: formData,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )

        const data = await response.json()

        if (response.ok && data?.access_token) {
          return data
        }

        return null
      },
    }),
  ],
  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

        // Decode token and pass info to session.
        // This data will be available client-side.
        const decoded = jwt_decode(token.accessToken)
        session.user.id = decoded.id
        session.user.email = decoded.email
        session.user.username = decoded.username
      }
      return session
    },
  },
})

If you visit `/api/auth/signin` you should now see the credentials authentication form.

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 Password Grant, you can implement the `hook_simple_oauth_private_claims_alter` hook to pass additional information to the session.

<?php

use Drupal\simple_oauth\Entities\AccessTokenEntity;
use Drupal\user\Entity\User;

/**
 * Implements hook_simple_oauth_private_claims_alter().
 */
function example_auth_simple_oauth_private_claims_alter(&$private_claims, AccessTokenEntity $access_token_entity) {
  $user_id = $access_token_entity->getUserIdentifier();
  /** @var \Drupal\user\UserInterface $user */
  $user = User::load($user_id);

  $private_claims = [
    'id' => $user->id(),
    'email' => $user->getEmail(),
    'username' => $user->getAccountName(),
    'field_name' => $user->get('field_name')->value, 
  ];
}

Next.js

Then update your `session` callback as follows:

callbacks: {
    async session({ session, token }) {
        if (token?.accessToken) {
            session.accessToken = token.accessToken

            // Decode token and pass info to session.
            // This data will be available client-side.
            const decoded = jwt_decode(token.accessToken)
            session.user.id = decoded.id
            session.user.email = decoded.email
            session.user.username = decoded.username
            session.user.field_name = decoded.field_name 
        }
        return session
    },
},

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 Authorization Code Grant

Community

Getting Started

Data Fetching

Authentication

Guides

Reference

Hooks

Drupal

Password Grant

Demo

Flow

Dependencies

Installation

Drupal

Next.js

useSession

Additional information

Drupal

Next.js

TypeScript