Fix login flow (#1002)

package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"dev": "next dev --turbo",
+		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
 		"predev": "pnpm run generate",

src/app/(main)/login/LoginComponent.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useQuery } from "urql";
+import { useSaleorAuthContext } from "@saleor/auth-sdk/react";
+import { CurrentUserDocument, type CurrentUserQuery } from "@/gql/graphql";
+import { LoginForm } from "@/ui/components/LoginForm";
+import { UserCard } from "@/ui/components/UserCard";
+
+export const LoginComponent = () => {
+	const { signOut } = useSaleorAuthContext();
+
+	const [{ data }] = useQuery<CurrentUserQuery>({
+		query: CurrentUserDocument.toString(),
+	});
+
+	return data?.me ? (
+		<>
+			<UserCard user={data.me} />
+			<button
+				onClick={() => signOut()}
+				className="rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700"
+				type="button"
+			>
+				Log Out
+			</button>
+		</>
+	) : (
+		<LoginForm />
+	);
+};

src/app/(main)/login/page.tsx

@@ -1,39 +1,13 @@
-"use client";
-
-import { gql, useQuery } from "urql";
-import { useSaleorAuthContext } from "@saleor/auth-sdk/react";
-import { LoginForm } from "@/ui/components/LoginForm";
+import { Suspense } from "react";
+import { LoginComponent } from "./LoginComponent";
 import { Loader } from "@/ui/atoms/Loader";
-import { CurrentUserDocument, type CurrentUserQuery } from "@/gql/graphql";
-import { UserCard } from "@/ui/components/UserCard";
 
 export default function LoginPage() {
-	const { signOut } = useSaleorAuthContext();
-
-	const [{ data, fetching }] = useQuery<CurrentUserQuery>({
-		query: gql(CurrentUserDocument.toString()),
-	});
-
-	if (fetching) {
-		return <Loader />;
-	}
-
 	return (
-		<section className="mx-auto max-w-7xl p-8">
-			{data?.me ? (
-				<>
-					<UserCard email={data.me.email} avatarURL={data.me.avatar?.url || ""} />
-					<button
-						onClick={() => signOut()}
-						className="rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700"
-						type="button"
-					>
-						Log Out
-					</button>
-				</>
-			) : (
-				<LoginForm />
-			)}
-		</section>
+		<Suspense fallback={<Loader />}>
+			<section className="mx-auto max-w-7xl p-8">
+				<LoginComponent />
+			</section>
+		</Suspense>
 	);
 }

src/ui/components/AuthProvider.tsx

@@ -20,23 +20,32 @@ export const saleorAuthClient = createSaleorAuthClient({
 	saleorApiUrl,
 });
 
-const makeUrqlClient = () =>
-	createClient({
+const makeUrqlClient = () => {
+	console.log(`makeUrqlClient`);
+	return createClient({
 		url: saleorApiUrl,
 		suspense: true,
-		requestPolicy: "cache-first",
+		// requestPolicy: "cache-first",
 		fetch: (input, init) => saleorAuthClient.fetchWithAuth(input as NodeJS.fetch.RequestInfo, init),
 		exchanges: [dedupExchange, cacheExchange, fetchExchange],
 	});
+};
 
 export function AuthProvider({ children }: { children: ReactNode }) {
+	console.log("AuthProvider");
 	invariant(saleorApiUrl, "Missing NEXT_PUBLIC_SALEOR_API_URL env variable");
 
-	const [urqlClient, setUrqlClient] = useState<Client>(makeUrqlClient());
+	const [urqlClient, setUrqlClient] = useState<Client>(() => makeUrqlClient());
 	useAuthChange({
 		saleorApiUrl,
-		onSignedOut: () => setUrqlClient(makeUrqlClient()),
-		onSignedIn: () => setUrqlClient(makeUrqlClient()),
+		onSignedOut: () => {
+			console.log("onSignedOut");
+			setUrqlClient(makeUrqlClient());
+		},
+		onSignedIn: () => {
+			console.log("onSignedIn");
+			setUrqlClient(makeUrqlClient());
+		},
 	});
 
 	return (

src/ui/components/UserCard.tsx

@@ -1,24 +1,20 @@
 import Image from "next/image";
 
-type UserCardProps = {
-	email: string;
-	avatarURL: string;
-};
-
-export const UserCard = (user: UserCardProps) => {
-	const { email, avatarURL } = user;
+export const UserCard = ({ user }: { user: { email: string; avatarURL?: string } }) => {
 	return (
 		<div className="rounded-xl bg-white p-4 dark:bg-neutral-800 md:flex">
-			<Image
-				className="h-24 w-24 rounded-full md:rounded-none "
-				src={avatarURL}
-				alt=""
-				width="384"
-				height="512"
-			/>
+			{user.avatarURL && (
+				<Image
+					className="h-24 w-24 rounded-full md:rounded-none "
+					src={user.avatarURL}
+					alt=""
+					width="384"
+					height="512"
+				/>
+			)}
 			<div className="space-y-4 p-8 text-center">
 				<p className="text-lg font-medium">
-					<span className="text-sky-500 dark:text-sky-400">{email} </span> has successfully signed in.
+					<span className="text-sky-500 dark:text-sky-400">{user.email} </span> has successfully signed in.
 				</p>
 			</div>
 		</div>