\n\n## Usage\n\n### Next.js App Router\n\nThe Saleor Auth SDK supports both **Next.js 13/14** and **Next.js 15**, but due to changes in how cookies are handled, different storage methods are required for each version.\n\n---\n\n## **Using Saleor Auth SDK in Next.js 13/14**\nNext.js 13 and 14 support **synchronous cookies**, which means you can use the `getNextServerCookiesStorage` function without issues.\n\n## **Setting Up the Auth Client (Next.js 13/14)**\n\n```ts\nimport { createSaleorAuthClient } from \"@saleor/auth-sdk\";\nimport { getNextServerCookiesStorage } from \"@saleor/auth-sdk/next/server\";\n\nconst getServerAuthClient = () => {\n const nextServerCookiesStorage = getNextServerCookiesStorage();\n return createSaleorAuthClient({\n saleorApiUrl: \"…\",\n refreshTokenStorage: nextServerCookiesStorage,\n accessTokenStorage: nextServerCookiesStorage,\n });\n};\n```\n\nLogging in can be implemented via Server Actions:\n\n```tsx\n {\n \"use server\";\n\n await getServerAuthClient().signIn(\n {\n email: formData.get(\"email\").toString(),\n password: formData.get(\"password\").toString(),\n },\n { cache: \"no-store\" },\n );\n }}\n>\n {/* … rest of the form … */}\n\n```\n\n## **Using Saleor Auth SDK in Next.js 15**\n\nNext.js 15 introduces asynchronous cookies, requiring the use of getNextServerCookiesStorageAsync instead.\n\n## **Setting Up the Auth Client (Next.js 15)**\n\n```ts\nimport { createSaleorAuthClient } from \"@saleor/auth-sdk\";\nimport { getNextServerCookiesStorageAsync } from \"@saleor/auth-sdk/next/server\";\n\nconst getServerAuthClient = async () => {\n const nextServerCookiesStorage = await getNextServerCookiesStorageAsync();\n return createSaleorAuthClient({\n saleorApiUrl: \"…\",\n refreshTokenStorage: nextServerCookiesStorage,\n accessTokenStorage: nextServerCookiesStorage,\n });\n};\n```\n\nLogging in can be implemented via Server Actions:\n\n```tsx\n {\n \"use server\";\n\n await (await getServerAuthClient()).signIn(\n {\n email: formData.get(\"email\").toString(),\n password: formData.get(\"password\").toString(),\n },\n { cache: \"no-store\" },\n );\n }}\n>\n {/* … rest of the form … */}\n\n```\n\nThen, you can use `saleorAuthClient.fetchWithAuth` directly for any queries and mutations.\n\nFor a full working example, see the [Saleor Auth SDK example](https://github.com/saleor/example-auth-sdk/tree/app/ssr/page.tsx).\n\n### Next.js Pages Router with [Apollo Client](https://www.apollographql.com/docs/react/)\n\n\n Step-by-step video tutorial\n\nCheck the following [step-by-step video](https://www.youtube.com/watch?v=XY1t8JiPwk0) guide on how to set this up.\n[](https://www.youtube.com/watch?v=XY1t8JiPwk0)\n\n\n\nWhen using Next.js (Pages Router) along with [Apollo Client](https://www.apollographql.com/docs/react/), there are two essential steps to setting up your application. First, you have to surround your application's root with two providers: `` and ``.\n\n`` comes from our React.js-auth package, located at `@saleor/auth-sdk/react`, and it needs to be set up with the Saleor auth client instance.\n\nThe `` comes from `@apollo/client` and it needs the live GraphQL client instance, which is enhanced with the authenticated `fetch` that comes from the Saleor auth client.\n\nLastly, you must run the `useAuthChange` hook. This links the `onSignedOut` and `onSignedIn` events.\n\nLet's look at an example:\n\n```tsx\nimport { AppProps } from \"next/app\";\nimport { ApolloProvider, ApolloClient, InMemoryCache, createHttpLink } from \"@apollo/client\";\nimport { createSaleorAuthClient } from \"@saleor/auth-sdk\";\nimport { SaleorAuthProvider, useAuthChange } from \"@saleor/auth-sdk/react\";\n\nconst saleorApiUrl = \"\";\n\n// Saleor Client\nconst saleorAuthClient = createSaleorAuthClient({ saleorApiUrl });\n\n// Apollo Client\nconst httpLink = createHttpLink({\n uri: saleorApiUrl,\n fetch: saleorAuthClient.fetchWithAuth,\n});\n\nexport const apolloClient = new ApolloClient({\n link: httpLink,\n cache: new InMemoryCache(),\n});\n\nexport default function App({ Component, pageProps }: AppProps) {\n useAuthChange({\n saleorApiUrl,\n onSignedOut: () => apolloClient.resetStore(),\n onSignedIn: () => {\n apolloClient.refetchQueries({ include: \"all\" });\n },\n });\n\n return (\n \n \n \n \n \n );\n}\n```\n\nThen, in your register, login and logout forms you can use the auth methods (`signIn`, `signOut`, `isAuthenticating`) provided by the `useSaleorAuthContext()`. For example, `signIn` is usually triggered when submitting the login form credentials.\n\n```tsx\nimport React, { FormEvent } from \"react\";\nimport { useSaleorAuthContext } from \"@saleor/auth-sdk/react\";\nimport { gql, useQuery } from \"@apollo/client\";\n\nconst CurrentUserDocument = gql`\n query CurrentUser {\n me {\n id\n email\n firstName\n lastName\n avatar {\n url\n alt\n }\n }\n }\n`;\n\nexport default function LoginPage() {\n const { signIn, signOut } = useSaleorAuthContext();\n\n const { data: currentUser, loading } = useQuery(CurrentUserDocument);\n\n const submitHandler = async (event: FormEvent) => {\n event.preventDefault();\n\n const result = await signIn({\n email: \"admin@example.com\",\n password: \"admin\",\n });\n\n if (result.data.tokenCreate.errors) {\n // handle errors\n }\n };\n\n if (loading) {\n return
\n )}\n \n );\n}\n```\n\n### Next.js (Pages Router) with [urql](https://formidable.com/open-source/urql/)\n\nWhen using Next.js (Pages Router) along with [urql](https://formidable.com/open-source/urql/) client, there are two essential steps to setting up your application. First, you have to surround your application's root with two providers: `` and ``.\n\n`` comes from our React.js-auth package, located at `@saleor/auth-sdk/react`, and it needs to be set up with the Saleor auth client.\n\nThe `` comes from `urql` and it needs the GraphQL client instance, which is enhanced with the authenticated `fetch` that comes from the Saleor auth client.\n\nLastly, you must run the `useAuthChange` hook. This links the `onSignedOut` and `onSignedIn` events and is meant to refresh the GraphQL store and in-flight active GraphQL queries.\n\nLet's look at an example:\n\n```tsx\nimport { AppProps } from \"next/app\";\nimport { Provider, cacheExchange, fetchExchange, ssrExchange } from \"urql\";\nimport { SaleorAuthProvider, useAuthChange } from \"@saleor/auth-sdk/react\";\n\nconst saleorApiUrl = \"\";\n\nconst saleorAuthClient = createSaleorAuthClient({ saleorApiUrl });\n\nconst makeUrqlClient = () =>\n createClient({\n url: saleorApiUrl,\n fetch: saleorAuthClient.fetchWithAuth,\n exchanges: [cacheExchange, fetchExchange],\n });\n\nexport default function App({ Component, pageProps }: AppProps) {\n // https://github.com/urql-graphql/urql/issues/297#issuecomment-504782794\n const [urqlClient, setUrqlClient] = useState(makeUrqlClient());\n\n useAuthChange({\n saleorApiUrl,\n onSignedOut: () => setUrqlClient(makeUrqlClient()),\n onSignedIn: () => setUrqlClient(makeUrqlClient()),\n });\n\n return (\n \n \n \n \n \n );\n}\n```\n\nThen, in your register, login and logout forms you can use the auth methods (`signIn`, `signOut`) provided by the `useSaleorAuthContext()`. For example, `signIn` is usually triggered when submitting the login form credentials.\n\n```tsx\nimport React, { FormEvent } from \"react\";\nimport { useSaleorAuthContext } from \"@saleor/auth-sdk/react\";\nimport { gql, useQuery } from \"urql\";\n\nconst CurrentUserDocument = gql`\n query CurrentUser {\n me {\n id\n email\n firstName\n lastName\n avatar {\n url\n alt\n }\n }\n }\n`;\n\nexport default function LoginPage() {\n const { signIn, signOut } = useSaleorAuthContext();\n\n const [{ data: currentUser, fetching: loading }] = useQuery({\n query: CurrentUserDocument,\n pause: isAuthenticating,\n });\n\n const submitHandler = async (event: FormEvent) => {\n event.preventDefault();\n\n const result = await signIn({\n email: \"admin@example.com\",\n password: \"admin\",\n });\n\n if (result.data.tokenCreate.errors) {\n // handle errors\n }\n };\n\n if (loading) {\n return
\n )}\n \n );\n}\n```\n\n### Next.js (Pages Router) with OpenID Connect\n\nSetup `_app.tsx` as described above. In your login component trigger the external auth flow using the following code:\n\n```tsx\nimport { useSaleorAuthContext, useSaleorExternalAuth } from \"@saleor/auth-sdk/react\";\nimport { ExternalProvider } from \"@saleor/auth-sdk\";\nimport Link from \"next/link\";\nimport { gql, useQuery } from \"@apollo/client\";\n\nexport default function Home() {\n const {\n loading: isLoadingCurrentUser,\n error,\n data,\n } = useQuery(gql`\n query CurrentUser {\n me {\n id\n email\n firstName\n lastName\n }\n }\n `);\n const { authURL, loading: isLoadingExternalAuth } = useSaleorExternalAuth({\n saleorApiUrl,\n provider: ExternalProvider.OpenIDConnect,\n redirectURL: \"/api/auth/callback\",\n });\n\n const { signOut } = useSaleorAuthContext();\n\n if (isLoadingExternalAuth || isLoadingCurrentUser) {\n return
Loading...
;\n }\n\n if (data?.me) {\n return (\n
\n {JSON.stringify(data)}\n \n
\n );\n }\n if (authURL) {\n return (\n
\n Login\n
\n );\n }\n return
Something went wrong
;\n}\n```\n\nYou also need to define the auth callback. In `pages/api/auth` create the `callback.ts` with the following content:\n\n```ts\nimport { ExternalProvider, SaleorExternalAuth } from \"@saleor/auth-sdk\";\nimport { createSaleorExternalAuthHandler } from \"@saleor/auth-sdk/next\";\n\nconst externalAuth = new SaleorExternalAuth(\"\", ExternalProvider.OpenIDConnect);\n\nexport default createSaleorExternalAuthHandler(externalAuth);\n```\n\n## FAQ\n\n## How do I reset password?\n\nThe `SaleorAuthClient` class provides you with a reset password method. If the reset password mutation is successful, it will log you in automatically, just like after a regular sign-in. The [`onSignIn` method of `useAuthChange` hook](#how-do-i-tell-my-graphql-client-to-refresh-queries-on-signin--signout) will also be triggered.\n\n```javascript\nconst { resetPassword } = useSaleorAuthContext();\n\nconst response = await resetPassword({\n email: \"example@mail.com\",\n password: \"newPassword\",\n token: \"apiToken\",\n});\n```\n","readmeFilename":"README.md"}