TTC
Theo's Typesafe Cult•2y ago
gle

publicPages not working.

import type { AppProps } from "next/app";
import { ClerkProvider, SignedIn } from "@clerk/nextjs";
import { useRouter } from "next/router";
import SignUpPage from "./sign-up/[[...index]]";
import SignInPage from "./sign-in/[[...index]]";
import { api } from "~/utils/api";

import "../styles/globals.css";
import "../styles/App.css";

const publicPages = ['/contactUs']

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  if (publicPages.includes(router.pathname)) {
    return (
      <main>
        <Component {...pageProps} />
      </main>
    );
  } else {
    return (
      <ClerkProvider theme={theme} {...pageProps}>
        <main>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          {router.pathname.match("/sign-up") ? <SignUpPage /> : <SignInPage />}
        </main>
        <footer>
        </footer>
      </ClerkProvider>
    );
  }
}

export default api.withTRPC(MyApp);
import type { AppProps } from "next/app";
import { ClerkProvider, SignedIn } from "@clerk/nextjs";
import { useRouter } from "next/router";
import SignUpPage from "./sign-up/[[...index]]";
import SignInPage from "./sign-in/[[...index]]";
import { api } from "~/utils/api";

import "../styles/globals.css";
import "../styles/App.css";

const publicPages = ['/contactUs']

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  if (publicPages.includes(router.pathname)) {
    return (
      <main>
        <Component {...pageProps} />
      </main>
    );
  } else {
    return (
      <ClerkProvider theme={theme} {...pageProps}>
        <main>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          {router.pathname.match("/sign-up") ? <SignUpPage /> : <SignInPage />}
        </main>
        <footer>
        </footer>
      </ClerkProvider>
    );
  }
}

export default api.withTRPC(MyApp);
I have the correct path. but whenever I type in localhost:3000/contactUs it just redirects me to the sign up / log in page.
10 Replies
whatplan
whatplan•2y ago
<ClerkProvider theme={theme} {...pageProps}>
        <main>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          <SignedOut>
            {router.pathname.match("/sign-up") ? <SignUpPage /> : <SignInPage />}
          </SignedOut>
        </main>
</ClerkProvider>
<ClerkProvider theme={theme} {...pageProps}>
        <main>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          <SignedOut>
            {router.pathname.match("/sign-up") ? <SignUpPage /> : <SignInPage />}
          </SignedOut>
        </main>
</ClerkProvider>
gle
gleOP•2y ago
meep, still not working ._.
whatplan
whatplan•2y ago
what is the intended behavior and what is the actual behavior
gle
gleOP•2y ago
intended behavior user types in localhost:3000/contactUs and it brought to a contactUs form, actual behavior user types in localhost:3000/contactUs and is redirected to the sign-in page with clerk auth. I want the contactUs page to be public so that people don't have to be logged in to view it
whatplan
whatplan•2y ago
const privatePages: Array<string> = ["/crud", "/sell"];

function MyApp({ Component, pageProps }: AppProps) {
  const { pathname } = useRouter();

  const isPrivatePage = privatePages.includes(pathname);

  return (
    <>
      <ClerkProvider {...pageProps}>
        <div className="flex min-h-screen flex-col items-center">
          <SiteHeader />
          <div className="min-w-full">
            {!isPrivatePage ? (
              <Component {...pageProps} />
            ) : (
              <>
                <SignedIn>
                  <Component {...pageProps} />
                </SignedIn>
                <SignedOut>
                  <RedirectToSignIn />
                </SignedOut>
              </>
            )}
          </div>
          <SiteFooter />
        </div>
      </ClerkProvider>
    </>
  );
}
const privatePages: Array<string> = ["/crud", "/sell"];

function MyApp({ Component, pageProps }: AppProps) {
  const { pathname } = useRouter();

  const isPrivatePage = privatePages.includes(pathname);

  return (
    <>
      <ClerkProvider {...pageProps}>
        <div className="flex min-h-screen flex-col items-center">
          <SiteHeader />
          <div className="min-w-full">
            {!isPrivatePage ? (
              <Component {...pageProps} />
            ) : (
              <>
                <SignedIn>
                  <Component {...pageProps} />
                </SignedIn>
                <SignedOut>
                  <RedirectToSignIn />
                </SignedOut>
              </>
            )}
          </div>
          <SiteFooter />
        </div>
      </ClerkProvider>
    </>
  );
}
heres what I have in one of my apps easy to flip around to publicPages
gle
gleOP•2y ago
thats ur _app.tsx file correct
whatplan
whatplan•2y ago
yes
gle
gleOP•2y ago
 
const publicPages: Array<string> = ['/contactUs'];

const theme = {
  general: {
    fontFamily: '"PT Sans"',
  },
};

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const isPublicPage = publicPages.includes(router);
  return (
    <>
      <ClerkProvider {...pageProps}>
        {/* <Head> */}
          {/* <link rel="icon" href="/favicon.ico" /> */}
        {/* </Head> */}
        <div className="flex min-h-screen flex-col items-center">
          {/* <SiteHeader /> */}
          <div className="min-w-full">
            {isPublicPage ? (
              <Component {...pageProps} />
            ) : (
              <>
                <SignedIn>
                  <Component {...pageProps} />
                </SignedIn>
                <SignedOut>
                  {/* <RedirectToSignIn /> */}
                </SignedOut>
              </>
            )}
          </div>
          {/* <SiteFooter /> */}
        </div>
      </ClerkProvider>
    </>
  );
}
 
const publicPages: Array<string> = ['/contactUs'];

const theme = {
  general: {
    fontFamily: '"PT Sans"',
  },
};

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const isPublicPage = publicPages.includes(router);
  return (
    <>
      <ClerkProvider {...pageProps}>
        {/* <Head> */}
          {/* <link rel="icon" href="/favicon.ico" /> */}
        {/* </Head> */}
        <div className="flex min-h-screen flex-col items-center">
          {/* <SiteHeader /> */}
          <div className="min-w-full">
            {isPublicPage ? (
              <Component {...pageProps} />
            ) : (
              <>
                <SignedIn>
                  <Component {...pageProps} />
                </SignedIn>
                <SignedOut>
                  {/* <RedirectToSignIn /> */}
                </SignedOut>
              </>
            )}
          </div>
          {/* <SiteFooter /> */}
        </div>
      </ClerkProvider>
    </>
  );
}
getting and Error on these lines 
   const router = useRouter();
  const isPublicPage = publicPages.includes(router);  " Argument of type 'NextRouter' is not assignable to parameter of type 'string'.ts(2345" 
   const router = useRouter();
  const isPublicPage = publicPages.includes(router);  " Argument of type 'NextRouter' is not assignable to parameter of type 'string'.ts(2345"
here are my imports if maybe im missing something? 
 import type { AppProps } from "next/app";
import { ClerkProvider, SignedIn,SignedOut,SignIn, UserButton, UserProfile } from "@clerk/nextjs";
import { useRouter } from "next/router";
import SignUpPage from "./sign-up/[[...index]]";
import SignInPage from "./sign-in/[[...index]]";
import { api } from "~/utils/api"; 
 import type { AppProps } from "next/app";
import { ClerkProvider, SignedIn,SignedOut,SignIn, UserButton, UserProfile } from "@clerk/nextjs";
import { useRouter } from "next/router";
import SignUpPage from "./sign-up/[[...index]]";
import SignInPage from "./sign-in/[[...index]]";
import { api } from "~/utils/api";
whatplan
whatplan•2y ago
const { pathname } = useRouter();
const isPrivatePage = privatePages.includes(pathname);
const { pathname } = useRouter();
const isPrivatePage = privatePages.includes(pathname);
gle
gleOP•2y ago
ya… not working man. 😂
Want results from more Discord servers?
Add your server