panteliselef / astro-with-clerk-auth

Community Astro SDK for Clerk with starter `astro-clerk-auth`
https://astro-clerk.elef.codes
MIT License
45 stars 11 forks source link

Sign In Page Redirects To Factor One Page #168

Closed slackermorris closed 3 months ago

slackermorris commented 4 months ago

Hi there,

Context

Thanks a bunch for this SDK.

I am at a loss to best describe what my issue is, mostly because the ready-to-use magic of Clerk sometimes makes it difficult to know what needs to be configured manually. And, to be honest, I've hit so many set backs elsewhere that I and a bit deflated and am hoping for an answer that doesn't require me to scale Everest myself for the understanding. Lol. Yes, I am being lazy, but something about "save time here to spend it elsewhere".

Whenever I try to sign-in using the SignIn component I am redirected to a factor-one page (which I have not implemented). I would have thought that the SignIn component would handle password authentication for me, etc, so I am unsure what I need to do? Any clues?

image

Relevant Files

// package.json
"astro-clerk-auth": "^0.7.0"
// astro.config.mjs

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import glsl from "vite-plugin-glsl";
import aws from "astro-sst";

import react from "@astrojs/react";
import clerk from "astro-clerk-auth";

export default defineConfig({
  output: "server",
  site: "https://www.badreviewsmakegoodmovies.com",
  adapter: aws(),
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
    react(),
    clerk({
      afterSignInUrl: "/",
      afterSignUpUrl: "/",
    }),
  ],
  vite: {
    plugins: [glsl()],
  },
});
// sign-in.astro
---
import { ClerkLayout } from "astro-clerk-auth/components/control";
import { SignIn } from "astro-clerk-auth/components/react";
import Layout from "../layouts/Layout.astro";

---

<ClerkLayout >
  <Layout title="Sign In to Clerk + Astro">
    <div>
      <SignIn path="/sign-in"/>
    </div>
  </Layout>
</ClerkLayout>
panteliselef commented 3 months ago

Hey @slackermorris, Let's try something quick can u do this ?

<SignIn routing="hash" />
slackermorris commented 3 months ago

@panteliselef Yup that solved it just fine. I'm not too versed in routing. Would you mind explaining how the above solution has fixed my issue?

panteliselef commented 3 months ago

Here is what the official docs say about routing in Clerk components.

I recommend hash routing because astro performs full page loads and components with path routing will flash in the screen as a whole new document loads.

Probably the issue with your original code was that the /sign-in route was not a catch all route.

panteliselef commented 3 months ago

I'll be closing this as the issue seems to have been resolved.