🏡 index : ~doyle/chartered.git

0b218ab5e60fba0970c07a874364b60fb4706102 [patch]

045c40f1578dc4040851ffe85cbbc5a6266a9dbf

5bfc36a5ff9093a89414553408c5b232ee7e8c5d

0b218ab5e60fba0970c07a874364b60fb4706102.tar.gz

Implement OAuth callbacks on new frontend

Diff

 chartered-web/config-example.toml                                 |  2 +-
 book/src/getting-started/installation.md                          |  2 +-
 book/src/guide/config-reference.md                                |  2 +-
 chartered-frontend/src/stores/auth.ts                             | 25 +++++++++++++++++++++++++
 chartered-frontend/src/routes/(unauthed)/login/oauth/+page.svelte | 19 +++++++++++++++++++
 5 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/chartered-web/config-example.toml b/chartered-web/config-example.toml
index 774a8ee..b867d85 100644
--- a/chartered-web/config-example.toml
+++ a/chartered-web/config-example.toml
@@ -1,7 +1,7 @@
bind_address = "127.0.0.1:8888"                     # address to bind server to, don't forget to configure the frontend too via the BASE_URL env var
database_uri = "sqlite:///tmp/chartered.db"         # must build with either sqlite or postgres features accordingly
storage_uri  = "file:///tmp/chartered"              # this can also be an S3 URI
frontend_base_uri = "http://localhost:1234/"        # URI for your chartered-frontend instance
frontend_base_uri = "http://localhost:5173/"        # URI for your chartered-frontend instance
encryption_key = "thisisanexamplekeydontuseme4prod" # any 32 char string will do

[auth.password]
diff --git a/book/src/getting-started/installation.md b/book/src/getting-started/installation.md
index 3f88b0d..c883e0e 100644
--- a/book/src/getting-started/installation.md
+++ a/book/src/getting-started/installation.md
@@ -34,7 +34,7 @@
bind_address = "127.0.0.1:8080"
database_uri = "postgres://user:password@localhost/chartered"
storage_uri  = "s3://s3-eu-west-1.amazonaws.com/my-cool-crate-store/"
frontend_base_uri = "http://localhost:1234/"
frontend_base_uri = "http://localhost:5173/"

[auth.password]
enabled = true
diff --git a/book/src/guide/config-reference.md b/book/src/guide/config-reference.md
index 8998c28..8a9541b 100644
--- a/book/src/guide/config-reference.md
+++ a/book/src/guide/config-reference.md
@@ -80,7 +80,7 @@

storage_uri  = "s3://s3-eu-west-1.amazonaws.com/my-cool-crate-store/" # or file:///var/lib/chartered

frontend_base_uri = "http://localhost:1234/"
frontend_base_uri = "http://localhost:5173/"

[auth.password]
enabled = true # enables password auth 
diff --git a/chartered-frontend/src/stores/auth.ts b/chartered-frontend/src/stores/auth.ts
index cc03b11..2735d15 100644
--- a/chartered-frontend/src/stores/auth.ts
+++ a/chartered-frontend/src/stores/auth.ts
@@ -140,6 +140,31 @@
}

/**
 * Attempt to log the user in using the OAuth callback throwing an error if an error occurred.
 *
 * @param params URL search parameters
 */
export async function handleOAuthCallback(params: string) {
    // call the backend and attempt the authentication
    const result = await fetch(`${BASE_URL}/a/-/web/v1/auth/login/oauth/complete${params}`);
    const json: LoginResult = await result.json();

    // server returned an error, forward it on - there's nothing else we
    // can do here
    if (json.error) {
        throw new Error(json.error);
    }

    // we got a successful response back from the server, get in there son
    auth.set({
        auth_key: json.key,
        expires: Date.parse(json.expires),
        picture_url: json.picture_url,
        uuid: json.user_uuid,
    });
}

/**
 * Successful response type of /web/v1/auth/login/oauth/[provider]/begin, contains the URL
 * the user needs to visit to complete the OAuth flow.
 */
diff --git a/chartered-frontend/src/routes/(unauthed)/login/oauth/+page.svelte b/chartered-frontend/src/routes/(unauthed)/login/oauth/+page.svelte
new file mode 100644
index 0000000..924cf95 100644
--- /dev/null
+++ a/chartered-frontend/src/routes/(unauthed)/login/oauth/+page.svelte
@@ -1,0 +1,19 @@
<script type="typescript">
    import { page } from '$app/stores';
    import { handleOAuthCallback } from '../../../../stores/auth';
    import Spinner from '../../../../components/Spinner.svelte';
    import ErrorAlert from '../../../../components/ErrorAlert.svelte';

    const callback = handleOAuthCallback($page.url.search);
</script>

<div class="h-[18rem]">
    {#await callback}
        <Spinner />
    {:then x}
        <Spinner />
    {:catch error}
        <!-- todo: redirect back to login -->
        <ErrorAlert showClose={false}>{error}</ErrorAlert>
    {/await}
</div>