1 reply

Nuxt + Fastify integration guide

Hi, I'm trying to use better-auth with nuxt and fastify. First of all I need the apps to be separate as backend might in future need to work with many clients, not only one webapp. Now to the problem. The flow is like this. On the Nuxt side I've created authClient like this.

export const authClient = createAuthClient({
    baseURL: "http://localhost:3001",
});

export const authClient = createAuthClient({
    baseURL: "http://localhost:3001",
});

Current usage is ultra simple.

<script setup lang="ts">
import { authClient } from '#imports';

const { useSession } = authClient;

const session = useSession();

</script>

<template>
    <div>
        <button v-if="!session?.data" @click="() => authClient.signIn.social({
            provider: 'google',
            callbackURL: 'http://localhost:3001/api/auth/callback/google'
        })">
            Continue with Google
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                Sign out
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { authClient } from '#imports';

const { useSession } = authClient;

const session = useSession();

</script>

<template>
    <div>
        <button v-if="!session?.data" @click="() => authClient.signIn.social({
            provider: 'google',
            callbackURL: 'http://localhost:3001/api/auth/callback/google'
        })">
            Continue with Google
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                Sign out
            </button>
        </div>
    </div>
</template>

Now to the backend side. Here is auth instance set up.

export const auth = betterAuth({
    plugins: [openAPI()],
    trustedOrigins: ["http://localhost:3001"],
    emailAndPassword: {
        enabled: true,
    },
    socialProviders: {
        google: {
            enabled: true,
            prompt: "select_account",
            clientId: envConfig.GOOGLE_CLIENT_ID,
            clientSecret: envConfig.GOOGLE_CLIENT_SECRET,
            redirectURI: `http://localhost:3001/api/auth/callback/google`,
        },
    },
    database: drizzleAdapter(db, { provider: "sqlite", schema: authSchema }),
});

export const auth = betterAuth({
    plugins: [openAPI()],
    trustedOrigins: ["http://localhost:3001"],
    emailAndPassword: {
        enabled: true,
    },
    socialProviders: {
        google: {
            enabled: true,
            prompt: "select_account",
            clientId: envConfig.GOOGLE_CLIENT_ID,
            clientSecret: envConfig.GOOGLE_CLIENT_SECRET,
            redirectURI: `http://localhost:3001/api/auth/callback/google`,
        },
    },
    database: drizzleAdapter(db, { provider: "sqlite", schema: authSchema }),
});

I've basically tried in every place to force redirect from Google to be sent to my backend, which knows where to pass it further (to my frontend), but all the time I'm getting referenced with a code to localhost:3000 (frontend) instead of localhost:3001 (backend). When I change in the url the port it goes correctly from there.

Nuxt + Fastify integration guide

export const authClient = createAuthClient({
    baseURL: "http://localhost:3001",
});

export const authClient = createAuthClient({
    baseURL: "http://localhost:3001",
});

Current usage is ultra simple.

<script setup lang="ts">
import { authClient } from '#imports';

const { useSession } = authClient;

const session = useSession();

</script>

<template>
    <div>
        <button v-if="!session?.data" @click="() => authClient.signIn.social({
            provider: 'google',
            callbackURL: 'http://localhost:3001/api/auth/callback/google'
        })">
            Continue with Google
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                Sign out
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { authClient } from '#imports';

const { useSession } = authClient;

const session = useSession();

</script>

<template>
    <div>
        <button v-if="!session?.data" @click="() => authClient.signIn.social({
            provider: 'google',
            callbackURL: 'http://localhost:3001/api/auth/callback/google'
        })">
            Continue with Google
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                Sign out
            </button>
        </div>
    </div>
</template>

Now to the backend side. Here is auth instance set up.

export const auth = betterAuth({
    plugins: [openAPI()],
    trustedOrigins: ["http://localhost:3001"],
    emailAndPassword: {
        enabled: true,
    },
    socialProviders: {
        google: {
            enabled: true,
            prompt: "select_account",
            clientId: envConfig.GOOGLE_CLIENT_ID,
            clientSecret: envConfig.GOOGLE_CLIENT_SECRET,
            redirectURI: `http://localhost:3001/api/auth/callback/google`,
        },
    },
    database: drizzleAdapter(db, { provider: "sqlite", schema: authSchema }),
});

export const auth = betterAuth({
    plugins: [openAPI()],
    trustedOrigins: ["http://localhost:3001"],
    emailAndPassword: {
        enabled: true,
    },
    socialProviders: {
        google: {
            enabled: true,
            prompt: "select_account",
            clientId: envConfig.GOOGLE_CLIENT_ID,
            clientSecret: envConfig.GOOGLE_CLIENT_SECRET,
            redirectURI: `http://localhost:3001/api/auth/callback/google`,
        },
    },
    database: drizzleAdapter(db, { provider: "sqlite", schema: authSchema }),
});

Nuxt + Fastify integration guide

Nuxt + Fastify integration guide

Similar Threads

Similar Threads

Similar Threads