diff --git a/boilerplate/fullstack/remix/app/routes/_index.tsx b/boilerplate/fullstack/remix/app/routes/_index.tsx
index e67c02e5..0b1a0b20 100644
--- a/boilerplate/fullstack/remix/app/routes/_index.tsx
+++ b/boilerplate/fullstack/remix/app/routes/_index.tsx
@@ -1,134 +1,46 @@
-import { CelebrateIcon, SeparatorLine, BlogsIcon, GuideIcon, SignOutIcon } from "../../assets/images";
-import { recipeDetails } from "../config/frontend";
-import SuperTokens from "supertokens-auth-react";
-import { LoaderFunctionArgs } from "@remix-run/node";
-import { useLoaderData, useNavigate } from "@remix-run/react";
-import SessionReact from "supertokens-auth-react/recipe/session/index.js";
-import { getSessionForSSR } from "supertokens-node/custom";
-import { TryRefreshComponent } from "../components/tryRefreshClientComponent";
-import { SessionAuthForRemix } from "../components/sessionAuthForRemix";
-import type { JWTPayload } from "jose";
-
-export async function loader({ request }: LoaderFunctionArgs): Promise<{
- accessTokenPayload: JWTPayload | undefined;
- hasToken: boolean;
- error: Error | undefined;
-}> {
- return getSessionForSSR(request);
-}
+import { Link } from "@remix-run/react";
+import { useSessionContext } from "supertokens-auth-react/recipe/session";
export default function Home() {
- const navigate = useNavigate();
-
- const { accessTokenPayload, hasToken, error } = useLoaderData<{
- accessTokenPayload: JWTPayload | undefined;
- hasToken: boolean;
- error: Error | undefined;
- }>();
-
- async function logoutClicked() {
- await SessionReact.signOut();
- SuperTokens.redirectToAuth();
- }
+ const session = useSessionContext();
- if (error) {
- return
Something went wrong while trying to get the session. Error - {error.message}
;
+ if (session.loading) {
+ return null;
}
-
- // `accessTokenPayload` will be undefined if it the session does not exist or has expired
- if (accessTokenPayload === undefined) {
- /**
- * This means that the user is not logged in. If you want to display some other UI in this
- * case, you can do so here.
- */
- if (!hasToken) {
- return navigate("/auth");
- }
- /**
- * This means that the session does not exist but we have session tokens for the user. In this case
- * the `TryRefreshComponent` will try to refresh the session.
- *
- * To learn about why the 'key' attribute is required refer to: https://github.com/supertokens/supertokens-node/issues/826#issuecomment-2092144048
- */
- return ;
- }
-
- const fetchUserData = async () => {
- const userInfoResponse = await fetch("http://localhost:3000/sessioninfo");
-
- alert(JSON.stringify(await userInfoResponse.json()));
- };
-
- const links: {
- name: string;
- link: string;
- icon: string;
- }[] = [
- {
- name: "Blogs",
- link: "https://supertokens.com/blog",
- icon: BlogsIcon,
- },
- {
- name: "Guides",
- link: recipeDetails.docsLink,
- icon: GuideIcon,
- },
- {
- name: "Sign Out",
- link: "",
- icon: SignOutIcon,
- },
- ];
-
- /**
- * SessionAuthForRemix will handle proper redirection for the user based on the different session states.
- * It will redirect to the login page if the session does not exist etc.
- */
return (
-
-
-
-
-
- Login successful
-
-
-
Your userID is:
-
-
{accessTokenPayload.sub}
-
-
+ <>
+
+
+ x
+
+
+
+
+
+ SuperTokens x Remix example project
+
+
+ {session.doesSessionExist ? (
+
+ You're signed in already, check out the Dashboard! 👇
+
Something went wrong while trying to get the session. Error - {error.message}
;
+ }
+
+ // `accessTokenPayload` will be undefined if it the session does not exist or has expired
+ if (accessTokenPayload === undefined) {
+ /**
+ * This means that the user is not logged in. If you want to display some other UI in this
+ * case, you can do so here.
+ */
+ if (!hasToken) {
+ return null;
+ }
+ /**
+ * This means that the session does not exist but we have session tokens for the user. In this case
+ * the `TryRefreshComponent` will try to refresh the session.
+ *
+ * To learn about why the 'key' attribute is required refer to: https://github.com/supertokens/supertokens-node/issues/826#issuecomment-2092144048
+ */
+ return ;
+ }
+
+ const callAPIClicked = async () => {
+ const userInfoResponse = await fetch("http://localhost:3000/sessioninfo");
+ alert(JSON.stringify(await userInfoResponse.json()));
+ };
+
+ /**
+ * SessionAuthForRemix will handle proper redirection for the user based on the different session states.
+ * It will redirect to the login page if the session does not exist etc.
+ */
+ return (
+
+
+
+
+ Login successful
+
+
+
Your userID is:
+
+ {accessTokenPayload.sub}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/boilerplate/fullstack/remix/public/ST.svg b/boilerplate/fullstack/remix/public/ST.svg
new file mode 100644
index 00000000..30b435bd
--- /dev/null
+++ b/boilerplate/fullstack/remix/public/ST.svg
@@ -0,0 +1,17 @@
+
diff --git a/boilerplate/fullstack/remix/public/remix.svg b/boilerplate/fullstack/remix/public/remix.svg
new file mode 100644
index 00000000..f8b1f6c3
--- /dev/null
+++ b/boilerplate/fullstack/remix/public/remix.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
+ 
+ 
+ 
+ Login successful
+