Kinde with astro
Hi all!
Is there any way to take the userDetails by ssr not by client from script tag?:
<!--index.astro-->
---
import astroLogo from '../assets/astro.svg?url';
import qwikLogo from '../assets/qwik.svg?url';
import { Counter } from '../components/counter.tsx';
import Layout from '../layouts/Layout.astro';
const name = 'Unknown';
---
<Layout title="Qwik + Astro">
<main id="app">
<div>
{
<div id="logged_out_view"> <button id="login" type="button">Sign in</button> <button id="register" type="button">Register</button> </div> </main> </Layout> <script> import { kinde } from '../clientKinde'; const userDetails = kinde.getUser(); console.log({ userDetails }); const loginId = document.getElementById('login'); const registerId = document.getElementById('register'); loginId && loginId.addEventListener('click', async () => { await kinde.login(); }); registerId && registerId.addEventListener('click', async () => { await kinde.register(); }); </script>
Welcome ${name}}
</div>
<h1>Qwik + Astro</h1>
<Counter />
<div id="logged_out_view"> <button id="login" type="button">Sign in</button> <button id="register" type="button">Register</button> </div> </main> </Layout> <script> import { kinde } from '../clientKinde'; const userDetails = kinde.getUser(); console.log({ userDetails }); const loginId = document.getElementById('login'); const registerId = document.getElementById('register'); loginId && loginId.addEventListener('click', async () => { await kinde.login(); }); registerId && registerId.addEventListener('click', async () => { await kinde.register(); }); </script>
3 Replies
From what I know kinde doesn't have support for astrojs, and that's why I use the JavaScript SDK approach
@everyone
Hi @mihainutuu, I feel we need to sort this ... we use astro on our main website 🤦 We have the code, I will check where we are with it.
Feel free to keep me updated 🫡