Damast•5mo ago

Svelte + Auth

Hey, i saw Svelte + Convex Auth isnt available yet, what auth solution do you reccomend?

24 Replies

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

Micha•2mo ago

@Damast you find an unofficial svelte adapter for convex auth here: https://github.com/mmailaender/convex-auth-svelte

GitHub

GitHub - mmailaender/convex-auth-svelte

Contribute to mmailaender/convex-auth-svelte development by creating an account on GitHub.

beerman•2mo ago

It would be good if you had a more minimal repo to show only the code that is needed to get it working

Micha•2mo ago

Do you mean the documentation or part of it are somewhat unclear to you? Because I put there all the code that should you get started. https://github.com/mmailaender/convex-auth-svelte/blob/main/src%2Flib%2Fsveltekit%2FREADME.md

GitHub

convex-auth-svelte/src/lib/sveltekit/README.md at main · mmailaend...

Contribute to mmailaender/convex-auth-svelte development by creating an account on GitHub.

beerman•2mo ago

Sorry brother, I did not see that Can I use magic links with this?

Micha•2mo ago

Yes, you can do everything what convex-auth provides. 🙂

beerman•2mo ago

Sorry to bother you. I seem to be missing some types. Is this normal?

beerman•2mo ago

Micha•2mo ago

Shouldn't be the case. Are you using vscode? You can try reloading vscode as sometimes the modules are not correctly loaded into intellisense. If the problem persists feel free to share with me a minimal repo with the reproduction and I can check it out.

Artifex•2mo ago

@Micha Hi i saw your repo, it's really good, have you tried the convex-better-auth integration?

Micha•2mo ago

Not yet, I'm waiting for the v0.8 release which eliminates the need of two user tables (If you want to store custom fields in your user table). But it's also lacking at the moment svelte support. It seems some user got it partially working, but it's definitely a TODO.

Artifex•2mo ago

I'm stuck on this part following the guide.

import { createAuth } from '$lib/server/auth';
import { svelteKitHandler } from 'better-auth/svelte-kit';

export async function handle({ event, resolve }) {
    return svelteKitHandler({ event, resolve, auth: createAuth(event.request) });
}

import { createAuth } from '$lib/server/auth';
import { svelteKitHandler } from 'better-auth/svelte-kit';

export async function handle({ event, resolve }) {
    return svelteKitHandler({ event, resolve, auth: createAuth(event.request) });
}

Maybe i'll just wait for 0.8 also

Micha•2mo ago

v0.8 is not bringing svelte support. They mentioned something about the official release (v1.0). What's the problem you're running into?

beerman•2mo ago

Hi again, really sorry to bother you but I'm having trouble getting this to work. I followed your instructions but continue getting an error trying to sign in using the Anonymous provider.

[CONVEX A(auth:signIn)] [ERROR] 'Provider anonymous is not configured, available providers are no providers have been configured.' Hit error while running auth:signIn: Error: [Request ID: fc5065e9d863f2d5] Server Error Uncaught Error: Provider anonymous is not configured, available providers are no providers have been configured. at getProviderOrThrow (../../node_modules/@convex-dev/auth/src/server/implementation/index.ts:126:4) at handler (../../node_modules/@convex-dev/auth/src/server/implementation/index.ts:416:26)

Would you happen to know why this happens? auth.ts

<script lang="ts">
// import Resend from "@auth/core/providers/resend";
import { Anonymous } from "@convex-dev/auth/providers/Anonymous";
import { convexAuth } from "@convex-dev/auth/server";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    // Resend,
    Anonymous,
  ],
});

<script lang="ts">
// import Resend from "@auth/core/providers/resend";
import { Anonymous } from "@convex-dev/auth/providers/Anonymous";
import { convexAuth } from "@convex-dev/auth/server";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    // Resend,
    Anonymous,
  ],
});

+page.svelte

    import { useAuth } from '@mmailaender/convex-auth-svelte/sveltekit';
    import Navbar from '../components/Navbar.svelte';

    const isAuthenticated = $derived(useAuth().isAuthenticated);
    const isLoading = $derived(useAuth().isLoading);
    const { signIn, signOut } = useAuth();
</script>

    import { useAuth } from '@mmailaender/convex-auth-svelte/sveltekit';
    import Navbar from '../components/Navbar.svelte';

    const isAuthenticated = $derived(useAuth().isAuthenticated);
    const isLoading = $derived(useAuth().isLoading);
    const { signIn, signOut } = useAuth();
</script>

<div class="min-h-screen bg-gray-50">
    <Navbar />

    {#if isLoading}
        <p>Loading authentication state...</p>
    {:else if isAuthenticated}
        <h1>Welcome, authenticated user!</h1>
        <button onclick={() => signOut()}>Sign Out</button>
    {:else}
        <h1>Please sign in</h1>
        <button
            onclick={() => {
                signIn('anonymous');
            }}
        >
            Sign in as guest
        </button>
    {/if}
</div>

<div class="min-h-screen bg-gray-50">
    <Navbar />

    {#if isLoading}
        <p>Loading authentication state...</p>
    {:else if isAuthenticated}
        <h1>Welcome, authenticated user!</h1>
        <button onclick={() => signOut()}>Sign Out</button>
    {:else}
        <h1>Please sign in</h1>
        <button
            onclick={() => {
                signIn('anonymous');
            }}
        >
            Sign in as guest
        </button>
    {/if}
</div>

beerman•2mo ago

Micha•2mo ago

Is your convex server running? npx convex dev

beerman•2mo ago

it is

Micha•2mo ago

Hmm weird. Because for me it's working just fine. Adding Anonymous, running npx convex dev, and it works. If you have a minimal reproduction that you can share, I can have a short look.

beerman•2mo ago

It's confusing. I haven't made any changes to the authTables yet

beerman•2mo ago

It looks like running the dev server and convex in the same terminal session was preventing the schema from updating the deployment. It works now

Paul E•2mo ago

You can also try Kinde Auth 🙂

beerman•2mo ago

Quick questions, I'm tryign to get the recommended pattern to work but I keep getting the following error:

Returning false from isAuthenticated because Error: {"code":"AuthProviderDiscoveryFailed","message":"Auth provider discovery of https://acoustic-bat-442.convex.site failed: 404 Not Found This Convex deployment does not have HTTP actions enabled."} at ConvexHttpClient.queryInner (file:///Users/jakubdonovan/Documents/code/fooddiscounts/node_modules/convex/dist/esm/browser/http_client.js:222:13) at process.processTicksAndRejections (node:internal/process/task_queues:105:5) at async ConvexHttpClient.query (file:///Users/jakubdonovan/Documents/code/fooddiscounts/node_modules/convex/dist/esm/browser/http_client.js:192:12) at async isAuthenticated (/Users/jakubdonovan/Documents/code/fooddiscounts/node_modules/@mmailaender/convex-auth-svelte/dist/sveltekit/server/handlers.js:46:28) at async requireAuth (/Users/jakubdonovan/Documents/code/fooddiscounts/src/hooks.server.ts:22:25) at async handleAuth (/Users/jakubdonovan/Documents/code/fooddiscounts/node_modules/@mmailaender/convex-auth-svelte/dist/sveltekit/server/handlers.js:116:26) at async respond (/Users/jakubdonovan/Documents/code/fooddiscounts/node_modules/@sveltejs/kit/src/runtime/server/respond.js:276:22) at async file:///Users/jakubdonovan/Documents/code/fooddiscounts/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:544:22 [AUTH] Route: /dashboard, Authenticated: false [AUTH] Redirecting to login from /dashboard Hit error while running auth:signIn: ......

The cause is clear, but I can't for the life of me find the option to enable HTTP actions anywhere in the convex dashboard.

Micha•2mo ago

Propably the http.ts file is missing https://labs.convex.dev/auth/setup/manual#configure-httpts - the easiest would be running npx @convex-dev/auth 🙂

Manual Setup - Convex Auth

Authentication library for your Convex backend

beerman•2mo ago

That did it, cheers

Svelte + Auth

Did you find this page helpful?