Svelte + Auth

[sacred jackal]

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

[faint kiln]

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](https://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!

[topaz cobalt]

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

[lunar saffron]

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

[topaz cobalt]

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

[lunar saffron]

Sorry brother, I did not see that

[lunar saffron]

Can I use magic links with this?

[topaz cobalt]

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

[lunar saffron]

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

[topaz cobalt]

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.

[brisk field]

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

[topaz cobalt]

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.

[brisk field]

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) });
}

Maybe i'll just wait for 0.8 also

[topaz cobalt]

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

[lunar saffron]

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,
  ],
});

+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>

<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>

[topaz cobalt]

Is your convex server running? npx convex dev

[lunar saffron]

it is

[topaz cobalt]

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.

[lunar saffron]

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

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

[minor stump]

You can also try Kinde Auth 🙂

[lunar saffron]

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.

[topaz cobalt]

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 🙂