feat: auth pages for mobile

appwrite · Nov 15, 2022 · 2171d7f · 2171d7f
1 parent 435bd12
commit 2171d7f
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -46,23 +46,25 @@
         /**
          * Handle initial load.
          */
-        const acceptedRoutes = ['/login', '/register', '/recover', '/invite'];
-        if ($user) {
-            if (!$page.url.pathname.startsWith('/console')) {
-                await goto(`${base}/console`, {
-                    replaceState: true
-                });
-            }
-        } else {
-            if (acceptedRoutes.includes($page.url.pathname)) {
-                await goto(`${base}${$page.url.pathname}${$page.url.search}`);
+        if (!$page.url.pathname.startsWith('/auth')) {
+            const acceptedRoutes = ['/login', '/register', '/recover', '/invite'];
+            if ($user) {
+                if (!$page.url.pathname.startsWith('/console')) {
+                    await goto(`${base}/console`, {
+                        replaceState: true
+                    });
+                }
             } else {
-                await goto(`${base}/login`, {
-                    replaceState: true
-                });
+                if (acceptedRoutes.includes($page.url.pathname)) {
+                    await goto(`${base}${$page.url.pathname}${$page.url.search}`);
+                } else {
+                    await goto(`${base}/login`, {
+                        replaceState: true
+                    });
+                }
             }
-            loading.set(false);
         }
+        loading.set(false);
     });
 
     afterNavigate((navigation) => {

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -8,6 +8,9 @@ import type { LayoutLoad } from './$types';
 export const ssr = false;
 
 export const load: LayoutLoad = async ({ depends, url }) => {
+    if (url.pathname.startsWith('/auth')) {
+        return;
+    }
     depends(Dependencies.ACCOUNT);
     try {
         const account = await sdkForConsole.account.get();

diff --git a/src/routes/auth/+layout.svelte b/src/routes/auth/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+    import { Container } from '$lib/layout';
+</script>
+
+<Container>
+    <slot />
+</Container>
diff --git a/src/routes/auth/magic-url/+page.svelte b/src/routes/auth/magic-url/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Heading } from '$lib/components';
+    import { Account, Client } from '@aw-labs/appwrite-console';
+    import { onMount } from 'svelte';
+
+    const client = new Client();
+    const account = new Account(client);
+
+    onMount(async () => {
+        const projectId = $page.url.searchParams.get('project');
+        client.setEndpoint(`${$page.url.origin}/v1`).setProject(projectId);
+
+        const userId = $page.url.searchParams.get('userId');
+        const secret = $page.url.searchParams.get('secret');
+
+        await account.updateMagicURLSession(userId, secret);
+        await goto(`appwrite-callback-${projectId}://${$page.url.search}`);
+    });
+</script>
+
+<Heading tag="h1" size="1">Missing Redirect URL</Heading>
+<p>
+    Your Magic URL login flow is missing a proper redirect URL. Please check the
+    <a href="https://appwrite.io/docs/client/account?sdk=web#createMagicURLSession"
+        >Magic URL docs</a>
+    and send request for new session with a valid redirect URL.
+</p>
diff --git a/src/routes/auth/oauth/failure/+page.svelte b/src/routes/auth/oauth/failure/+page.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Heading } from '$lib/components';
+    import { onMount } from 'svelte';
+
+    onMount(async () => {
+        const project = $page.url.searchParams.get('project');
+        if (project) {
+            await goto(`appwrite-callback-${project}://${$page.url.search}`);
+        }
+    });
+</script>
+
+<Heading tag="h1" size="1">Missing Redirect URL</Heading>
+<p class="text">
+    Your OAuth login flow is missing a proper redirect URL. Please check the
+    <a class="link" href="https://appwrite.io/docs/client/account?sdk=web#createOAuth2Session"
+        >OAuth docs</a>
+    and send request for new session with a valid callback URL.
+</p>
diff --git a/src/routes/auth/oauth/success/+page.svelte b/src/routes/auth/oauth/success/+page.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Heading } from '$lib/components';
+    import { onMount } from 'svelte';
+
+    onMount(async () => {
+        const project = $page.url.searchParams.get('project');
+        if (project) {
+            await goto(`appwrite-callback-${project}://${$page.url.search}`);
+        }
+    });
+</script>
+
+<Heading tag="h1" size="1">Missing Redirect URL</Heading>
+<p class="text">
+    Your OAuth login flow is missing a proper redirect URL. Please check the
+    <a class="link" href="https://appwrite.io/docs/client/account?sdk=web#createOAuth2Session"
+        >OAuth docs</a>
+    and send request for new session with a valid callback URL.
+</p>