Sveltkit or authJS examples

[JohnRSim]

Any plans to release Sveltkit SDK or integrated example.

thanks.

[mooreds]

Hi @JohnRSim , it is on our list of desired quickstarts. I know @alex-fusionauth did some looking at this, not sure how far he got.

[JohnRSim]

@alex-fusionauth I was looking at your sveltekit repo and was going to use your provider were you able to get it to work or are there any updates.

Thanks!

[alex-fusionauth]

@alex-fusionauth I was looking at your sveltekit repo and was going to use your provider were you able to get it to work or are there any updates?

Thanks!

@JohnRSim

I haven't looked in a minute, but I believe with the updates made to the Auth.js package this should now work. We are just now adding a Nuxt3 example that uses the same. So it "should" work just fine.

[JohnRSim]

@alex-fusionauth can you share the Nuxt3 example

FusionAuth({
                issuer: OAUTH2_PROXY_OIDC_ISSUER_URL,
                clientId: OAUTH2_PROXY_CLIENT_ID,
                clientSecret: OAUTH2_PROXY_CLIENT_SECRET,
                wellKnown: `${FUSIONAUTH_URL}/.well-known/openid-configuration`,
                //tenantId: FUSIONAUTH_TENANT_ID, // Only required if you're using multi-tenancy
            }),

I'm getting the following with the latest auth.js: [auth][error] InvalidEndpoints: Provider "fusionauth" is missing both issuer and authorization endpoint config. At least one of them is required. .Read more at https://errors.authjs.dev#invalidendpoints 2024-04-27 20:03:09 at assertConfig (file:///app/node_modules/@auth/core/lib/utils/assert.js:70:24)

[alex-fusionauth]

@JohnRSim it hasn't made it fully through our PR approval process yet but this is our new quickstart example.

https://github.com/FusionAuth/fusionauth-quickstart-javascript-nuxt-web

The doc update that is in review https://github.com/FusionAuth/fusionauth-site/pull/3012

That error acts like the env vars are not being set.

Here is our full check

// file: ~/server/api/auth/[...].ts
import { NuxtAuthHandler } from '#auth';
import FusionAuthProvider from 'next-auth/providers/fusionauth';

const fusionAuthIssuer = process.env.FUSIONAUTH_ISSUER;
const fusionAuthClientId = process.env.FUSIONAUTH_CLIENT_ID;
const fusionAuthClientSecret = process.env.FUSIONAUTH_CLIENT_SECRET;
const fusionAuthUrl = process.env.FUSIONAUTH_URL;
const fusionAuthTenantId = process.env.FUSIONAUTH_TENANT_ID;

const missingError = 'missing in environment variables.';
if (!fusionAuthIssuer) {
  throw Error('FUSIONAUTH_ISSUER' + missingError);
}
if (!fusionAuthClientId) {
  throw Error('FUSIONAUTH_CLIENT_ID' + missingError);
}
if (!fusionAuthClientSecret) {
  throw Error('FUSIONAUTH_CLIENT_SECRET' + missingError);
}
if (!fusionAuthUrl) {
  throw Error('FUSIONAUTH_URL' + missingError);
}
if (!fusionAuthTenantId) {
  throw Error('FUSIONAUTH_TENANT_ID' + missingError);
}

export default NuxtAuthHandler({
  providers: [
    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
    FusionAuthProvider.default({
      issuer: fusionAuthIssuer,
      clientId: fusionAuthClientId,
      clientSecret: fusionAuthClientSecret,
      wellKnown: `${fusionAuthUrl}/.well-known/openid-configuration/${fusionAuthTenantId}`,
      tenantId: fusionAuthTenantId, // Only required if you're using multi-tenancy
      authorization: {
        params: {
          scope: 'openid offline_access email profile',
        },
      },
    }),
  ],
});

[alex-fusionauth]

@JohnRSim a couple updates on SvelteKit.

I have an updated and working example, which we will end up turning into our quickstart. https://github.com/alex-fusionauth/fusionauth-sveltekit

I have also opened an issue to update our provider to better match and address some of the issues that we are seeing with Auth.js vs. Next-Auth. https://github.com/nextauthjs/next-auth/issues/10867 https://github.com/nextauthjs/next-auth/pull/10868

Please let me know if you find any issues with this, I will add more context in our quickstart on how to add middleware protection instead of just client-side.

I hope this helps for the time being.

[JohnRSim]

Great let me check it out