Feature request: Add utility / composable to list available providers

[larsrickert]

Hey, first of all thanks for the amazing work on this auth package!

While implementing this nuxt-auth-utils package in my Nuxt layer that is used as base application for other projects, I stumbled across the following use case: I want to create a UI where the user can select any provider configured for the application to login in with.

In my opinion, it would be very useful if nuxt-auth-utils would provide a utility / composable or similar to get a list of actually configured auth providers for the application so such UIs can be rendered dynamically (e.g. by displaying buttons with the provider name + logo/icon).

Example usage

// app/pages/login.vue
<script lang="ts" setup>
const { data: providers } = await useFetch("/api/_auth/providers");
const { openInPopup } = useUserSession();
</script>

<template>
  <div>
    <button v-for="provider in providers" :key="provider" @click="openInPopup(`/auth/${provider}`)">
      Login with: {{ provider }}
    </button>
  </div>
</template>

Optionally, the useFetch could also be wrapped inside a custom composable to abstract the API call.

Implementation proposal

This is just an example :)

// server/api/_auth/providers.get.ts
export type AuthProvider = keyof ReturnType<typeof useRuntimeConfig>["oauth"];

export default defineEventHandler(() => {
  const config = useRuntimeConfig();

  const availableProviders = Object.entries(config.oauth)
    .filter(([_, config]) => "clientId" in config && !!config.clientId)
    .map(([provider]) => provider as AuthProvider);

  return availableProviders;
});

[ineshbose]

Using the exact implementation in my Nuxt app :)

[atinux]

Nice, I think you can directly to it in a server plugin as you can access the runtimeConfig + save in a useState() to avoid an API cal to be made.

See how I implemented it on https://github.com/atinux/atidraw/blob/main/app/plugins/auth-state.server.ts

// app/plugins/providers.server.ts
export default defineNuxtPlugin(() => {
  const { oauth } = useRuntimeConfig(useRequestEvent())

  // Expose the auth providers to the client
  useState('authProviders', () => {
    return {
      google: Boolean(oauth.google.clientId && oauth.google.clientSecret),
      github: Boolean(oauth.github.clientId && oauth.github.clientSecret),
    }
  })
})

Let me add it for a v1 as it could be like:

const { oauthProviders } = useAuth()

[larsrickert]

Let me add it for a v1 as it could be like:

Thanks @atinux, thats sounds great! Does it make sense to only include the providers that are actually defined so its easier to iterate over them (e.g. for dynamically creating login pages)?