feat: added auth0 as oauth provider (#6)

* feat: added auth0 as oauth provider

* chore: update

* update readme

---------

Co-authored-by: Sébastien Chopin <[email protected]>

Author: Azurency

README.md

@@ -15,7 +15,7 @@ Minimalist Authentication module for Nuxt exposing Vue composables and server ut
 ## Features
 
 - Secured & sealed cookies sessions
-- OAuth Providers
+- [OAuth Providers](#supported-oauth-providers)
 
 ## Requirements
 
@@ -145,11 +145,13 @@ It can also be set using environment variables:
 - `NUXT_OAUTH_<PROVIDER>_CLIENT_ID`
 - `NUXT_OAUTH_<PROVIDER>_CLIENT_SECRET`
 
-Supported providers:
+#### Supported OAuth Providers
+
 - GitHub
 - Spotify
 - Google
 - Twitch
+- Auth0
 
 You can add your favorite provider by creating a new file in [src/runtime/server/lib/oauth/](./src/runtime/server/lib/oauth/).
 

playground/.env.example

@@ -11,3 +11,7 @@ NUXT_OAUTH_GOOGLE_CLIENT_SECRET=
 # Twitch OAuth
 NUXT_OAUTH_TWITCH_CLIENT_ID=
 NUXT_OAUTH_TWITCH_CLIENT_SECRET=
+# Auth0 OAuth
+NUXT_OAUTH_AUTH0_CLIENT_ID=
+NUXT_OAUTH_AUTH0_CLIENT_SECRET=
+NUXT_OAUTH_AUTH0_DOMAIN=

playground/app.vue

@@ -36,22 +36,32 @@ const { loggedIn, session, clear } = useUserSession()
         Login with Google
       </UButton>
       <UButton
-        v-if="loggedIn"
+        v-if="!loggedIn || !session.user.twitch"
+        to="/auth/twitch"
+        icon="i-simple-icons-twitch"
+        external
         color="gray"
         size="xs"
-        @click="clear"
       >
-        Logout
+        Login with Twitch
       </UButton>
       <UButton
-        v-if="!loggedIn || !session.user.twitch"
-        to="/auth/twitch"
-        icon="i-simple-icons-twitch"
+        v-if="!loggedIn || !session.user.auth0"
+        to="/auth/auth0"
+        icon="i-simple-icons-auth0"
         external
         color="gray"
         size="xs"
       >
-        Login with Twitch
+        Login with Auth0
+      </UButton>
+      <UButton
+        v-if="loggedIn"
+        color="gray"
+        size="xs"
+        @click="clear"
+      >
+        Logout
       </UButton>
     </template>
   </UHeader>

playground/auth.d.ts

@@ -5,6 +5,7 @@ declare module '#auth-utils' {
       github?: any
       google?: any
       twitch?: any
+      auth0?: any
     }
     loggedInAt: number
   }

playground/server/routes/auth/auth0.get.ts

@@ -0,0 +1,15 @@
+export default oauth.auth0EventHandler({
+  config: {
+    emailRequired: true,
+  },
+  async onSuccess(event, { user }) {
+    await setUserSession(event, {
+      user: {
+        auth0: user,
+      },
+      loggedInAt: Date.now()
+    })
+
+    return sendRedirect(event, '/')
+  }
+})

src/module.ts

@@ -69,25 +69,31 @@ export default defineNuxtModule<ModuleOptions>({
     })
     // OAuth settings
     runtimeConfig.oauth = defu(runtimeConfig.oauth, {})
-    // GitHub Oauth
+    // GitHub OAuth
     runtimeConfig.oauth.github = defu(runtimeConfig.oauth.github, {
       clientId: '',
       clientSecret: ''
     })
-    // Spotify Oauth
+    // Spotify OAuth
     runtimeConfig.oauth.spotify = defu(runtimeConfig.oauth.spotify, {
       clientId: '',
       clientSecret: ''
     })
-    // Google Oauth
+    // Google OAuth
     runtimeConfig.oauth.google = defu(runtimeConfig.oauth.google, {
       clientId: '',
       clientSecret: ''
     })
-    // Twitch Oauth
+    // Twitch OAuth
     runtimeConfig.oauth.twitch = defu(runtimeConfig.oauth.twitch, {
       clientId: '',
       clientSecret: ''
     })
+    // Auth0 OAuth
+    runtimeConfig.oauth.auth0 = defu(runtimeConfig.oauth.auth0, {
+      clientId: '',
+      clientSecret: '',
+      domain: ''
+    })
   }
 })

src/runtime/server/lib/oauth/auth0.ts

@@ -0,0 +1,126 @@
+import type { H3Event, H3Error } from 'h3'
+import { eventHandler, createError, getQuery, getRequestURL, sendRedirect } from 'h3'
+import { withQuery, parsePath } from 'ufo'
+import { ofetch } from 'ofetch'
+import { defu } from 'defu'
+import { useRuntimeConfig } from '#imports'
+
+export interface OAuthAuth0Config {
+  /**
+   * Auth0 OAuth Client ID
+   * @default process.env.NUXT_OAUTH_AUTH0_CLIENT_ID
+   */
+  clientId?: string
+  /**
+   * Auth0 OAuth Client Secret
+   * @default process.env.NUXT_OAUTH_AUTH0_CLIENT_SECRET
+   */
+  clientSecret?: string
+  /**
+   * Auth0 OAuth Issuer
+   * @default process.env.NUXT_OAUTH_AUTH0_DOMAIN
+   */
+  domain?: string
+  /**
+   * Auth0 OAuth Audience
+   * @default process.env.NUXT_OAUTH_AUTH0_AUDIENCE
+   */
+  audience?: string
+  /**
+   * Auth0 OAuth Scope
+   * @default []
+   * @see https://auth0.com/docs/get-started/apis/scopes/openid-connect-scopes
+   * @example ['openid']
+   */
+  scope?: string[]
+  /**
+   * Require email from user, adds the ['email'] scope if not present
+   * @default false
+   */
+  emailRequired?: boolean
+}
+
+interface OAuthConfig {
+  config?: OAuthAuth0Config
+  onSuccess: (event: H3Event, result: { user: any, tokens: any }) => Promise<void> | void
+  onError?: (event: H3Event, error: H3Error) => Promise<void> | void
+}
+
+export function auth0EventHandler({ config, onSuccess, onError }: OAuthConfig) {
+  return eventHandler(async (event: H3Event) => {
+    // @ts-ignore
+    config = defu(config, useRuntimeConfig(event).oauth?.auth0) as OAuthAuth0Config
+    const { code } = getQuery(event)
+
+    if (!config.clientId || !config.clientSecret || !config.domain) {
+      const error = createError({
+        statusCode: 500,
+        message: 'Missing NUXT_OAUTH_AUTH0_CLIENT_ID or NUXT_OAUTH_AUTH0_CLIENT_SECRET or NUXT_OAUTH_AUTH0_DOMAIN env variables.'
+      })
+      if (!onError) throw error
+      return onError(event, error)
+    }
+    const authorizationURL = `https://${config.domain}/authorize`
+    const tokenURL = `https://${config.domain}/oauth/token`
+
+    const redirectUrl = getRequestURL(event).href
+    if (!code) {
+      config.scope = config.scope || ['openid', 'offline_access']
+      if (config.emailRequired && !config.scope.includes('email')) {
+        config.scope.push('email')
+      }
+      // Redirect to Auth0 Oauth page
+      return sendRedirect(
+        event,
+        withQuery(authorizationURL as string, {
+          response_type: 'code',
+          client_id: config.clientId,
+          redirect_uri: redirectUrl,
+          scope: config.scope.join(' '),
+          audience: config.audience || '',
+        })
+      )
+    }
+
+    const tokens: any = await ofetch(
+      tokenURL as string,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: {
+          grant_type: 'authorization_code',
+          client_id: config.clientId,
+          client_secret: config.clientSecret,
+          redirect_uri: parsePath(redirectUrl).pathname,
+          code,
+        }
+      }
+    ).catch(error => {
+      return { error }
+    })
+    if (tokens.error) {
+      const error = createError({
+        statusCode: 401,
+        message: `Auth0 login failed: ${tokens.error?.data?.error_description || 'Unknown error'}`,
+        data: tokens
+      })
+      if (!onError) throw error
+      return onError(event, error)
+    }
+
+    const tokenType = tokens.token_type
+    const accessToken = tokens.access_token
+    const user: any = await ofetch(`https://${config.domain}/userinfo`, {
+      headers: {
+        Authorization: `${tokenType} ${accessToken}`
+      }
+    })
+
+    return onSuccess(event, {
+      tokens,
+      user
+    })
+  })
+}

src/runtime/server/utils/oauth.ts

@@ -2,10 +2,12 @@ import { githubEventHandler } from '../lib/oauth/github'
 import { googleEventHandler } from '../lib/oauth/google'
 import { spotifyEventHandler } from '../lib/oauth/spotify'
 import { twitchEventHandler } from '../lib/oauth/twitch'
+import { auth0EventHandler } from '../lib/oauth/auth0'
 
 export const oauth = {
   githubEventHandler,
   spotifyEventHandler,
   googleEventHandler,
   twitchEventHandler,
+  auth0EventHandler
 }