feat(provider): ✨ Added PayPal provider

itpropro · itpropro · commit b7f8b077c4d2 · 2024-10-04T03:31:25.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,4 @@ Temporary Items
 .apdisk
 
 oidcstorage
+docs
diff --git a/README.md b/README.md
diff --git a/playground/composables/useProviders.ts b/playground/composables/useProviders.ts
@@ -38,6 +38,12 @@ export function useProviders(currentProvider: string) {
       disabled: Boolean(currentProvider === 'cognito'),
       icon: 'i-majesticons-puzzle',
     },
+    {
+      label: 'PayPal',
+      name: 'paypal',
+      disabled: Boolean(currentProvider === 'paypal'),
+      icon: 'i-simple-icons-paypal',
+    },
     {
       label: 'Generic OIDC',
       name: 'oidc',
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -84,6 +84,15 @@ export default defineNuxtConfig({
         logoutRedirectUri: 'https://google.com', // Needs to be registered in Zitadel portal
         authenticationScheme: 'none', // Set this to 'header' if Code is used instead of PKCE
       },
+      paypal: {
+        clientId: '',
+        clientSecret: '',
+        scope: ['openid', 'profile'],
+        authorizationUrl: 'https://www.sandbox.paypal.com/signin/authorize?flowEntry=static',
+        tokenUrl: 'https://api-m.sandbox.paypal.com/v1/oauth2/token',
+        userInfoUrl: 'https://api-m.sandbox.paypal.com/v1/identity/openidconnect/userinfo?schema=openid',
+        redirectUri: 'http://127.0.0.1:3000/auth/paypal/callback',
+      },
     },
     session: {
       expirationCheck: true,
diff --git a/playground/package.json b/playground/package.json
@@ -17,6 +17,6 @@
     "@iconify-json/simple-icons": "^1.2.3",
     "@nuxtjs/color-mode": "^3.5.1",
     "@unocss/nuxt": "^0.62.4",
-    "nuxt-oidc-auth": "workspace:^"
+    "nuxt-oidc-auth": "latest"
   }
 }
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -10,7 +10,7 @@ async function handleRefresh() {
 </script>
 
 <template>
-  <div class="grid grid-cols-2 w-full">
+  <div class="grid grid-cols-3 w-full">
     <div class="col-start-1 flex flex-col items-center gap-4">
       <p class="text-xl">
         Login with
@@ -32,6 +32,11 @@ async function handleRefresh() {
         <span :class="provider.icon" />
         <span class="pl-2">{{ provider.label }}</span>
       </button>
+    </div>
+    <div class="col-start-2 flex flex-col items-center gap-4">
+      <p class="text-xl">
+        Session controls
+      </p>
       <p>Logged in: {{ loggedIn }}</p>
       <p>Current provider: {{ currentProvider }}</p>
       <button
@@ -67,7 +72,7 @@ async function handleRefresh() {
         <span class="pl-2">Clear session</span>
       </button>
     </div>
-    <div class="col-start-2">
+    <div class="col-start-3">
       <p class="pb-4 text-xl">
         User object
       </p>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
   - playground
   - client
+  - '!docs/**'
diff --git a/src/runtime/providers/auth0.ts b/src/runtime/providers/auth0.ts
@@ -33,12 +33,9 @@ interface Auth0ProviderConfig {
 type Auth0RequiredFields = 'baseUrl' | 'clientId' | 'clientSecret'
 
 export const auth0 = defineOidcProvider<Auth0ProviderConfig, Auth0RequiredFields>({
-  responseType: 'code',
   tokenRequestType: 'json',
   authenticationScheme: 'body',
   userInfoUrl: 'userinfo',
-  grantType: 'authorization_code',
-  scope: ['openid'],
   pkce: true,
   state: true,
   nonce: false,
diff --git a/src/runtime/providers/cognito.ts b/src/runtime/providers/cognito.ts
@@ -4,7 +4,6 @@ type CognitoRequiredFields = 'baseUrl' | 'clientId' | 'clientSecret' | 'logoutRe
 
 export const cognito = defineOidcProvider<OidcProviderConfig, CognitoRequiredFields>({
   userNameClaim: 'username',
-  responseType: 'code',
   tokenRequestType: 'form-urlencoded',
   authenticationScheme: 'header',
   userInfoUrl: 'oauth2/userInfo',
@@ -13,8 +12,6 @@ export const cognito = defineOidcProvider<OidcProviderConfig, CognitoRequiredFie
   pkce: true,
   state: true,
   nonce: true,
-  scopeInTokenRequest: false,
-  callbackRedirectUrl: '/',
   authorizationUrl: 'oauth2/authorize',
   tokenUrl: 'oauth2/token',
   logoutUrl: 'logout',
diff --git a/src/runtime/providers/entra.ts b/src/runtime/providers/entra.ts
@@ -39,15 +39,12 @@ interface EntraProviderConfig {
 
 export const entra = defineOidcProvider<EntraProviderConfig, EntraIdRequiredFields>({
   tokenRequestType: 'form-urlencoded',
-  responseType: 'code',
-  authenticationScheme: 'header',
   logoutRedirectParameterName: 'post_logout_redirect_uri',
   grantType: 'authorization_code',
   scope: ['openid'],
   pkce: true,
   state: true,
   nonce: true,
-  scopeInTokenRequest: false,
   requiredProperties: [
     'clientId',
     'clientSecret',
diff --git a/src/runtime/providers/github.ts b/src/runtime/providers/github.ts
@@ -8,14 +8,11 @@ export const github = defineOidcProvider<OidcProviderConfig, GithubRequiredField
   tokenUrl: 'https://github.com/login/oauth/access_token',
   userInfoUrl: 'https://api.github.com/user',
   tokenRequestType: 'json',
-  responseType: 'code',
   authenticationScheme: 'body',
-  grantType: 'authorization_code',
   scope: ['user:email'],
   pkce: false,
   state: true,
   nonce: false,
-  scopeInTokenRequest: false,
   skipAccessTokenParsing: true,
   requiredProperties: [
     'clientId',
diff --git a/src/runtime/providers/index.ts b/src/runtime/providers/index.ts
@@ -5,4 +5,5 @@ export { entra } from './entra.js'
 export { github } from './github.js'
 export { keycloak } from './keycloak.js'
 export { oidc } from './oidc.js'
+export { paypal } from './paypal.js'
 export { zitadel } from './zitadel.js'
diff --git a/src/runtime/providers/keycloak.ts b/src/runtime/providers/keycloak.ts
@@ -32,14 +32,9 @@ export const keycloak = defineOidcProvider<KeycloakProviderConfig, KeycloakRequi
   tokenUrl: 'protocol/openid-connect/token',
   userInfoUrl: 'protocol/openid-connect/userinfo',
   tokenRequestType: 'form-urlencoded',
-  responseType: 'code',
-  authenticationScheme: 'header',
-  grantType: 'authorization_code',
   pkce: true,
   state: false,
   nonce: true,
-  scopeInTokenRequest: false,
-  skipAccessTokenParsing: false,
   requiredProperties: [
     'clientId',
     'clientSecret',
@@ -58,7 +53,6 @@ export const keycloak = defineOidcProvider<KeycloakProviderConfig, KeycloakRequi
   validateAccessToken: true,
   validateIdToken: false,
   exposeIdToken: true,
-  exposeAccessToken: false,
   baseUrl: '',
   logoutUrl: 'protocol/openid-connect/logout',
   logoutRedirectParameterName: 'post_logout_redirect_uri',
diff --git a/src/runtime/providers/paypal.ts b/src/runtime/providers/paypal.ts
@@ -0,0 +1,25 @@
+import { defineOidcProvider, type OidcProviderConfig } from '../server/utils/provider'
+
+type PayPalRequiredFields = 'clientId' | 'clientSecret'
+
+export const paypal = defineOidcProvider<OidcProviderConfig, PayPalRequiredFields>({
+  responseType: 'code',
+  validateAccessToken: false,
+  validateIdToken: false,
+  skipAccessTokenParsing: true,
+  state: true,
+  nonce: true,
+  tokenRequestType: 'form-urlencoded',
+  scope: ['openid'],
+  requiredProperties: [
+    'clientId',
+    'clientSecret',
+    'authorizationUrl',
+    'tokenUrl',
+    'redirectUri',
+  ],
+  authorizationUrl: '',
+  tokenUrl: '',
+  userInfoUrl: '',
+  redirectUri: '',
+})
diff --git a/src/runtime/server/handler/callback.ts b/src/runtime/server/handler/callback.ts
@@ -160,8 +160,8 @@ function callbackEventHandler({ onSuccess }: OAuthConfig<UserSession>) {
         user.userInfo = config.filterUserInfo ? Object.fromEntries(Object.entries(userInfoResult).filter(([key]) => config.filterUserInfo?.includes(key))) : userInfoResult
       }
     }
-    catch {
-      logger.warn(`[${provider}] Failed to fetch userinfo`)
+    catch (error) {
+      logger.warn(`[${provider}] Failed to fetch userinfo`, error)
     }
 
     // Get user name from access token
diff --git a/src/runtime/server/utils/oidc.ts b/src/runtime/server/utils/oidc.ts
@@ -65,11 +65,13 @@ export async function refreshAccessToken(refreshToken: string, config: OidcProvi
     idToken: tokenResponse.id_token || '',
   }
 
+  const accessToken = parseJwtToken(tokenResponse.access_token, !!config.skipAccessTokenParsing)
+
   // Construct user object
   const user: Omit<UserSession, 'provider'> = {
     canRefresh: !!tokens.refreshToken,
     updatedAt: Math.trunc(Date.now() / 1000), // Use seconds instead of milliseconds to align wih JWT
-    expireAt: parseJwtToken(tokenResponse.access_token, !!config.skipAccessTokenParsing)?.exp || Math.trunc(Date.now() / 1000) + 3600, // Fallback 60 min
+    expireAt: accessToken.exp || Math.trunc(Date.now() / 1000) + 3600, // Fallback 60 min
   }
 
   // Update optional claims
@@ -85,6 +87,7 @@ export async function refreshAccessToken(refreshToken: string, config: OidcProvi
     user,
     tokens,
     expiresIn: tokenResponse.expires_in,
+    parsedAccessToken: accessToken,
   }
 }
 
diff --git a/src/runtime/server/utils/provider.ts b/src/runtime/server/utils/provider.ts
@@ -156,7 +156,7 @@ export interface OidcProviderConfig {
    */
   validateIdToken?: boolean
   /**
-   * Base URL for the provider, used when to dynamically create authorizationUrl, tokenUrl, userinfoUrl and logoutUrl if possible
+   * Provider Only. Base URL for the provider, used when to dynamically create authorizationUrl, tokenUrl, userinfoUrl and logoutUrl if possible
    */
   baseUrl?: string
   /**
@@ -228,6 +228,7 @@ export function defineOidcProvider<TConfig, TRequired extends keyof OidcProvider
     ],
     validateAccessToken: true,
     validateIdToken: true,
+    skipAccessTokenParsing: false,
     exposeAccessToken: false,
     exposeIdToken: false,
     callbackRedirectUrl: '/',
diff --git a/src/runtime/server/utils/security.ts b/src/runtime/server/utils/security.ts
@@ -161,7 +161,7 @@ export async function decryptToken(input: EncryptedToken, key: string): Promise<
  * @param skipParsing
  * @returns A decoded JWT token object with a JSON parsed header and payload
  */
-export function parseJwtToken(token: string, skipParsing?: boolean): JwtPayload {
+export function parseJwtToken(token: string, skipParsing?: boolean): JwtPayload | Record<string, never> {
   if (skipParsing) {
     const logger = useOidcLogger()
     logger.info('Skipping JWT token parsing')
@@ -170,7 +170,7 @@ export function parseJwtToken(token: string, skipParsing?: boolean): JwtPayload
   const [header, payload, signature, ...rest] = token.split('.')
   if (!header || !payload || !signature || rest.length)
     throw new Error('Invalid JWT token')
-  return JSON.parse(base64ToText(payload, { urlSafe: true }))
+  return JSON.parse(base64ToText(payload, { urlSafe: true })) as JwtPayload
 }
 
 export async function validateToken(token: string, options: ValidateAccessTokenOptions): Promise<JwtPayload> {
diff --git a/src/runtime/server/utils/session.ts b/src/runtime/server/utils/session.ts
@@ -90,14 +90,13 @@ export async function refreshUserSession(event: H3Event) {
     return sendRedirect(event, `/auth/${provider}/logout`)
   }
 
-  const { user, tokens, expiresIn } = tokenRefreshResponse
+  const { user, tokens, expiresIn, parsedAccessToken } = tokenRefreshResponse
 
   // Replace the session storage
-  const accessToken = parseJwtToken(tokens.accessToken, !!config.skipAccessTokenParsing)
 
   const updatedPersistentSession: PersistentSession = {
-    exp: accessToken.exp || Math.trunc(Date.now() / 1000) + Number.parseInt(expiresIn),
-    iat: accessToken.iat || Math.trunc(Date.now() / 1000),
+    exp: parsedAccessToken.exp || Math.trunc(Date.now() / 1000) + Number.parseInt(expiresIn),
+    iat: parsedAccessToken.iat || Math.trunc(Date.now() / 1000),
     accessToken: await encryptToken(tokens.accessToken, tokenKey),
     refreshToken: await encryptToken(tokens.refreshToken, tokenKey),
     ...tokens.idToken && { idToken: await encryptToken(tokens.idToken, tokenKey) },
diff --git a/src/runtime/types.ts b/src/runtime/types.ts
@@ -5,17 +5,18 @@ import type * as _PROVIDERS from './providers'
 
 import type { EncryptedToken, JwtPayload } from './server/utils/security'
 
-export type ProviderKeys = 'apple' | 'auth0' | 'entra' | 'github' | 'keycloak' | 'oidc' | 'cognito' | 'zitadel'
+export type ProviderKeys = 'apple' | 'auth0' | 'entra' | 'github' | 'keycloak' | 'oidc' | 'cognito' | 'zitadel' | 'paypal'
 export type ProviderKeysWithDev = ProviderKeys | 'dev'
 
 export interface ProviderConfigs {
   auth0: typeof _PROVIDERS.auth0
   apple: typeof _PROVIDERS.apple
+  cognito: typeof _PROVIDERS.cognito
   entra: typeof _PROVIDERS.entra
   github: typeof _PROVIDERS.github
   keycloak: typeof _PROVIDERS.keycloak
   oidc: typeof _PROVIDERS.oidc
-  cognito: typeof _PROVIDERS.cognito
+  paypal: typeof _PROVIDERS.paypal
   zitadel: typeof _PROVIDERS.zitadel
 }
 

Original file line number	Diff line number	Diff line change
`@@ -48,3 +48,4 @@ Temporary Items`
`48`	`48`	`.apdisk`
`49`	`49`
`50`	`50`	`oidcstorage`
	`51`	`+docs`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,6 @@`
`17`	`17`	`"@iconify-json/simple-icons": "^1.2.3",`
`18`	`18`	`"@nuxtjs/color-mode": "^3.5.1",`
`19`	`19`	`"@unocss/nuxt": "^0.62.4",`
`20`		`- "nuxt-oidc-auth": "workspace:^"`
	`20`	`+ "nuxt-oidc-auth": "latest"`
`21`	`21`	`}`
`22`	`22`	`}`