0

I'm working on my first full stack web application using SvelteKit, MongoDB, and Auth0. I need guidance on implementing secure authentication and user-specific document access. Here are my specific questions:

  1. Authentication: How do I configure Auth0 and set up authentication in my SvelteKit app? I want to restrict database access to authenticated users and ensure that each user can only access their own documents.
  2. MongoDB Integration: What's the recommended approach for creating a new document in MongoDB for each authenticated user, if it doesn't already exist? I want to ensure data separation and restrict access to each user's own documents.
  3. Code Organization: In my project, I have structured my code using directories such as lib, services, stores, and config. Is this a recommended approach for organizing code in a SvelteKit application? Could you provide insights on how I can use these directories effectively and what their purpose is?

Here are the code snippets in case recreation is required -

<!-- +layout.svelte -->
<script>
    import "../app.css"

    import { onMount } from "svelte"
    import auth from "$lib/services/auth"
    import { isAuthenticated, user } from "$lib/stores/auth"

    let auth0Client

    onMount(async () => {
        auth0Client = await auth.createClient()
        isAuthenticated.set(await auth0Client.isAuthenticated())
        user.set(await auth0Client.getUser())

        if ($isAuthenticated) {
            console.log("Logged in:", $user.name)

            const res = await fetch("/api/user", {
                method: "GET"
            })
            const response = await res.json()
    
            if (response.status === 200) {
                console.log("API Functional", response)
            } else {
                console.error("API Failed", response)
            }
        } else {
            console.log("Not logged in:", $isAuthenticated)

            const res = await fetch("/api/user", {
                method: "GET"
            })
            const response = await res.json()
    
            if (response.status === 200) {
                console.log("API Functional", response)
            } else {
                console.error("API Failed", response)
            }
        }

    })

    function login() {
        auth.loginWithPopup(auth0Client)
            .then(() => {
                console.log("Logged in post button click")
            })
            .catch((err) => {
                console.error("Could not log in post button click", err)
            })
    }

    function logout() {
        auth.logout(auth0Client)
            .then(() => {
                isAuthenticated.set(false)
                user.set({})
            })
            .catch((err) => {
                console.error("Could not log out.", err)
            })
    }
</script>

<div class="w-10/12 mx-auto">
    <h1 class="text-3xl font-bold">Business Point International</h1>

    {#if $isAuthenticated}
        <button on:click={logout}>Logout</button>
        <h2>Hey {$user.name}!</h2>
        {#if $user.picture}
            <img src={$user.picture} alt={$user.name} />
        {/if}
        <!-- <h3>{$user.sub}</h3> -->
    {:else}
        <button on:click={login}>Login</button>
    {/if}
    <!-- <p>{JSON.stringify(data)}</p> -->
</div>

<slot />
// lib/stores/auth.js
import { writable } from 'svelte/store'

export const isAuthenticated = writable(false)
export const user = writable({})
export const popupOpen = writable(false)
export const error = writable()
// lib/services/auth.js
import { createAuth0Client } from '@auth0/auth0-spa-js'

import { user, isAuthenticated, popupOpen } from '$lib/stores/auth'
import config from '$lib/config/auth0'

async function createClient() {
    let auth0Client = await createAuth0Client({
        domain: config.domain,
        clientId: config.clientId
    })

    return auth0Client
}

async function loginWithPopup(client, options) {
    popupOpen.set(true)
    try {
        await client.loginWithPopup(options)

        user.set(await client.getUser())
        isAuthenticated.set(true)
    } catch (e) {
        console.error(e)
    } finally {
        popupOpen.set(false)
    }
}

function logout(client) {
    return client.logout()
}

const auth = {
    createClient,
    loginWithPopup,
    logout
}

export default auth
// lib/services/mongodb.js
import { MongoClient } from "mongodb"
import { MONGO_DB_URI } from "$env/static/private"

const client = new MongoClient(MONGO_DB_URI)

await client.connect()

export default client.db("bpi")
// lib/config/auth0.js
const config = {
    domain: "dev-******.us.auth0.com",
    clientId: "***"
}

export default config;

I would appreciate any advice, code snippets, or recommended resources to help me implement these features effectively and securely. Thank you!

0 Answers0