Next.js social sign-in
Users authenticate with HubSpot from a Next.js application.
Auth.js · Const
Hubspot
HubSpot is a built-in Auth.js OAuth provider. Configure its client credentials with environment variables, add the provider to Auth.js, and register the framework-specific callback URL.
How it works
HubSpot is a built-in OAuth provider. Import the framework-specific HubSpot provider, add it to the Auth.js providers list, configure the client credentials through AUTH_HUBSPOT_ID and AUTH_HUBSPOT_SECRET, and register the callback URL ending in /api/auth/callback/hubspot for Next.js.
Syntax
HubspotKey points
- For Next.js, register the HubSpot callback at the API auth callback path.
- The provider expects the HubSpot client ID and secret through these environment variables.
- Next.js projects import the provider from the next-auth providers package.
- Express uses its framework package and mounts the Auth.js handler under the auth route.
Common mistakes
- The provider does not expose the full token-holder profile.
- Do not assume that the user's name and profile image are available through the HubSpot API.
Example: Configure HubSpot with NextAuth
import NextAuth from "next-auth"
import Hubspot from "next-auth/providers/hubspot"
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [Hubspot],
})Register the built-in HubSpot provider in a NextAuth configuration; credentials are read from the documented environment variables.
When to use it
Framework-specific authentication
A multi-framework application needs HubSpot OAuth.
HubSpot identity integration
An application needs CRM identity sign-in while accepting limited profile data.
Interview questions
QHow do you add HubSpot authentication to a Next.js Auth.js setup?
Use the built-in Hubspot provider and place it in the providers array passed to NextAuth. The documented Next.js import is next-auth/providers/hubspot.
Follow-up: What callback URL should be configured for Next.js? Use https://example.com/api/auth/callback/hubspot, replacing the host with the application host.
QWhich environment variables does the HubSpot provider use?
Set AUTH_HUBSPOT_ID and AUTH_HUBSPOT_SECRET in the environment. The provider configuration can then use the imported Hubspot provider without explicitly passing credentials.
Follow-up: What must be changed for another framework? Import Hubspot from that framework's Auth.js package and use its framework-specific authentication setup.
QWhat callback URL belongs in the HubSpot application configuration?
The Next.js callback route is /api/auth/callback/hubspot. The full documented example is https://example.com/api/auth/callback/hubspot.
Follow-up: What profile limitation should be considered? HubSpot does not provide the name and profile photo through its API, and the token-holder data is limited.
Related
OAuth ProvidersConfiguring an OAuth providerNextAuthExpressAuthQwikAuth$SvelteKitAuth