mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-12 08:45:38 +02:00
fc5a755408
This adds a simple way to incorporate a centralized authentication flow. The idea is to have the user, API and SSH (for machine authentication) all in one place using `openauthjs` + `SST` We also have a database now :) > We are using InstantDB as it allows us to authenticate a use with just the email. Plus it is super simple simple to use _of course after the initial fumbles trying to design the db and relationships_
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { $, component$, useVisibleTask$ } from "@builder.io/qwik";
|
|
import { createClient } from "@openauthjs/openauth/client";
|
|
|
|
function getHashParams(url: URL) {
|
|
const urlString = url.toString()
|
|
const hash = urlString.substring(urlString.indexOf('#') + 1); // Extract the part after the #
|
|
console.log("url", hash)
|
|
const params = new URLSearchParams(hash);
|
|
const paramsObj = {} as any;
|
|
for (const [key, value] of params.entries()) {
|
|
paramsObj[key] = decodeURIComponent(value);
|
|
}
|
|
console.log(paramsObj)
|
|
return paramsObj;
|
|
}
|
|
|
|
function removeURLParams() {
|
|
const newURL = window.location.origin + window.location.pathname; // Just origin and path
|
|
window.location.replace(newURL);
|
|
}
|
|
|
|
export default component$(() => {
|
|
|
|
const login = $(async () => {
|
|
const client = createClient({
|
|
clientID: "www",
|
|
issuer: "https://auth.lauryn.dev.nestri.io"
|
|
})
|
|
|
|
const { url } = await client.authorize("http://localhost:5173/login", "token", { pkce: true })
|
|
window.location.href = url
|
|
})
|
|
|
|
// eslint-disable-next-line qwik/no-use-visible-task
|
|
useVisibleTask$(async () => {
|
|
const urlObj = new URL(window.location.href);
|
|
const params = getHashParams(urlObj)
|
|
if (params.access_token && params.refresh_token) {
|
|
|
|
localStorage.setItem("access_token", params.access_token)
|
|
localStorage.setItem("refresh_token", params.refresh_token)
|
|
removeURLParams()
|
|
}
|
|
|
|
|
|
})
|
|
return (
|
|
<div class="h-screen w-screen flex justify-center items-center">
|
|
<button class="px-2 py-1 font-title text-lg bg-gray-400 rounded-lg" onClick$={login}>
|
|
Login
|
|
</button>
|
|
</div>
|
|
)
|
|
}) |