Implement register and login with Telegram

Add the concept of authentication methods that authenticate an account
where using the telegram login widget is one such method.  If a login is
done with an authentication method that's not associated with any
account the session ends up with the data from the authentication
method in order to allow registering a new account with the
authentication method.

This has to be stored on the session as otherwise it wouldn't be
possible to implement authentication methods such as OAuth2 that takes
the user to a third-party site and then redirects the browser back.
This commit is contained in:
Hornwitser 2025-07-09 15:21:39 +02:00
parent 2d6bcebc5a
commit aaa2faffb1
14 changed files with 357 additions and 8 deletions

View file

@ -33,6 +33,7 @@
</template>
<template v-else>
<NuxtLink to="/login">Log In</NuxtLink>
<NuxtLink to="/register">Register</NuxtLink>
</template>
</div>
</header>

View file

@ -0,0 +1,61 @@
<!--
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div ref="div">
<button
v-if="!loaded"
@click="load"
>
Enable Log in with Telegram
</button>
</div>
</template>
<script lang="ts" setup>
import type { TelegramAuthData } from '~/shared/types/telegram';
const divElement = useTemplateRef("div");
const loaded = ref(false);
const runtimeConfig = useRuntimeConfig();
const sessionStore = useSessionStore();
const route = useRoute();
function load() {
const script = document.createElement("script");
script.async = true;
script.src = "https://telegram.org/js/telegram-widget.js?22";
script.dataset.telegramLogin = runtimeConfig.public.telegramBotUsername;
script.dataset.size = "medium";
script.dataset.onauth = "onTelegramAuth(user)";
script.dataset.requestAccess = "write";
divElement.value?.appendChild(script);
loaded.value = true;
}
async function login(authData: TelegramAuthData) {
const session = await $fetch("/api/auth/ap/telegram-login", {
method: "POST",
body: {
authData,
},
});
sessionStore.update(session);
if (!session.account) {
await navigateTo("/register");
} else if (route.path === "/register") {
await navigateTo("/");
}
}
declare global {
export function onTelegramAuth(user: any): void;
}
onMounted(() => {
// XXX this asumes there's only ever one LogInTelegram component mounted
window.onTelegramAuth = function(authData: TelegramAuthData) {
login(authData).catch(err => alert(err.data?.message ?? err.message));
};
});
</script>