Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sign In Page Redirects To Factor One Page #168

Closed
slackermorris opened this issue Jun 3, 2024 · 4 comments
Closed

Sign In Page Redirects To Factor One Page #168

slackermorris opened this issue Jun 3, 2024 · 4 comments

Comments

@slackermorris
Copy link

slackermorris commented Jun 3, 2024

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
Copy link
Owner

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

<SignIn routing="hash" />

@slackermorris
Copy link
Author

@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
Copy link
Owner

panteliselef commented Jun 14, 2024

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants