nuxt-auth-utils : custom provider ? help

[Hontans]

I saw how to add a custom provider in the docs ...but i really don't want to fork the whole project just to add a custom provider

Cant' we just add it in some folder in nuxt and have it work ?

Thanks for any feedback 👌

[atinux]

We need to export the utils in order for you to create a custom provider from your repository itself. In the meantime you can copy/paste some of the codebase.

What provider do you have in mind?

[Hontans]

we need to implement BOX oauth
(was kinda suprised it wasnt in there by default)

But yeah, id love to see how to work arount it fr now 🙏

[robert-hoffmann]

Oh yes, i was lookign for this too. Would be nice to have box.com

I did find this as an example:
https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/box.ts

But yeah, i think just dropping a file into a folder without having to fork this project, wait for a PR to be accepted, etc ..would be awesome !

Also, just thinking: maybe would be a plus to have these providers be configurable (tokenUrl, etc) directly in nuxt.config.ts

PS: Hope to see this become an official module soon 😎

[robert-hoffmann]

Ok, was able to implement

1. forked nuxt-auth-utils
2. implemented provider
3. tested on a nuxt project by linking nuxt-auth-utils directly via nuxt.config.ts with modules: ['../nuxt-auth-utils/src/module']

Enjoy 👍

Suggested implementation

// /server/routes/auth/box.get.ts
export default defineOAuthBoxEventHandler({
  config: {},
  async onSuccess(event, { user, tokens }) {

    await setUserSession(event, {
      user  : user,
      tokens: tokens
    })
    return sendRedirect(event, '/')
  },
  // Optional, will return a json error and 401 status code by default
  onError(event, error) {
    console.error('Box OAuth error:', error)
    return sendRedirect(event, '/')
  },
})

// /app/pages/test.vue
<script setup>
const { loggedIn, user, session, fetch, clear, openInPopup } = useUserSession()

async function refreshTokens() {
  await $fetch('/api/auth/box_refresh_token', { method: 'POST' })
  await fetch() // Reload session with new tokens
}
</script>

<template>
  <div v-if="loggedIn">
    <h1>Welcome !</h1>
    <p>Logged in since {{ session.loggedInAt }}</p>
    <pre>user:{{ user }}</pre>
    <pre>session:{{ session }}</pre>
    <button @click="refreshTokens">Refresh tokens</button>
    <button @click="fetch">Refresh session</button>
    <button @click="clear">Logout</button>
  </div>
  <div v-else>
    <h1>Not logged in</h1>
    <a href="/auth/box">Login with Box</a>
    <!-- or open the OAuth route in a popup -->
    <button @click="openInPopup('/auth/box')">Login with Box</button>
  </div>
</template>

// /server/api/auth/box_refresh_tokens.ts
interface BoxTokens {
  access_token   : string
  refresh_token  : string
  expires_in     : number
  token_type     : 'bearer'
  restricted_to? : Array<{ scope: string; object?: { type: string; id: string } }>
}

export default defineEventHandler(async (event) => {
  const session = await getUserSession(event)
  const tokens  = session.tokens as BoxTokens | undefined

  if (!tokens?.refresh_token) {
    throw createError({
      statusCode : 401,
      message    : 'No refresh token available'
    })
  }

  const config = useRuntimeConfig(event)

  // Request new tokens from Box
  const newTokens = await $fetch<BoxTokens>('https://api.box.com/oauth2/token', {
    method: 'POST',
    body: new URLSearchParams({
      grant_type    : 'refresh_token',
      refresh_token : tokens.refresh_token,
      client_id     : config.oauth.box.clientId,
      client_secret : config.oauth.box.clientSecret
    })
  })

  // Update session with new tokens
  await setUserSession(event, {
    user       : session.user,
    tokens     : newTokens,
    loggedInAt : session.loggedInAt
  })

  return { success: true }
})

[atinux]

Do you want to open a PR @robert-hoffmann?

[robert-hoffmann]

Do you want to open a PR @robert-hoffmann?

Already did ;-)

#494

[atinux]

Oh my bad! Could you please take a look at the Copilot comments, they seems quite good

[robert-hoffmann]

Ok, copilot actually caught one i missed (don't export interface)

The other one it seems is more a generic suggestion and would probably benefit all providers

I'll have a closer look later when i get home 👍

[robert-hoffmann]

@atinux

All done, removed old pull request, made a feature branch, ran all tests and created setup guide

PR is here : #498

Full setup guide for:

1. authentification
2. refreshing tokens
3. updating scope to read/write
4. uploading a file to box

Just copy paste code for fully functional tests

https://gist.github.com/robert-hoffmann/f673b3df89f63ec6958568ddd3b5f8b1

[sveinung-t]

We need to export the utils in order for you to create a custom provider from your repository itself. In the meantime you can copy/paste some of the codebase.

What provider do you have in mind?

Hope to see this becoming reality. It's quite frustrating trying to find an easy to use auth package with any custom provider. It doesn't make sense to open a PR for a small or medium sized business' own identity provider.

---

Edit: I missed the OIDC provider, which is probably what mostly anyone in my case might need. I'm not sure I've caught everything, but here's where I'm at atm.

# .env
NUXT_SESSION_PASSWORD=
NUXT_OAUTH_OIDC_CLIENT_ID=
NUXT_OAUTH_OIDC_CLIENT_SECRET=
NUXT_OAUTH_OIDC_OPENID_CONFIG=

Optionally modify scopes...

// nuxt.config.ts
export default defineNuxtConfig({
  ...,
  runtimeConfig: {
    oauth: {
      oidc: {
        scope: ['openid', 'profile']
      }
    }
  }
})

I get errors of missing route without this. 🤔

// server/api/auth/oidc.get.ts
export default defineOAuthOidcEventHandler({
  async onSuccess(event, { user }) {
    await setUserSession(event, { user })
    return sendRedirect(event, '/')
  }
})

Ending finally with,

<script setup>
// app/components/LoginSignout.vue
const { loggedIn, clear } = useUserSession()
</script>
<template>
    <button v-if="loggedIn" @click="clear">Sign out</button>
    <a v-else href="/api/auth/oidc">Log in</a>
</template>

I'm stuck on a bad request problem, and I'm not sure where it's going wrong, but that's a me problem.