{"name":"Saleor Auth SDK: Streamlined Authentication for Next.js Storefronts","description":"The Saleor Auth SDK provides a secure and customizable solution for integrating authentication and authorization into storefronts built with Saleor. It offers seamless integration with Next.js (App and Pages Router) and popular GraphQL clients like Apollo and urql, all within a tiny bundle size. This SDK simplifies complex auth flows, allowing developers to focus on building rich e-commerce experiences.","github":"https://github.com/saleor/auth-sdk","url":"https://osrepos.com/repo/saleor-auth-sdk","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/saleor-auth-sdk","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/saleor-auth-sdk.md","json":"https://osrepos.com/repo/saleor-auth-sdk.json","topics":["apollo","graphql","nextjs","saleor","typescript","urql","authentication","ecommerce"],"keywords":["apollo","graphql","nextjs","saleor","typescript","urql","authentication","ecommerce"],"stars":null,"summary":"The Saleor Auth SDK provides a secure and customizable solution for integrating authentication and authorization into storefronts built with Saleor. It offers seamless integration with Next.js (App and Pages Router) and popular GraphQL clients like Apollo and urql, all within a tiny bundle size. This SDK simplifies complex auth flows, allowing developers to focus on building rich e-commerce experiences.","content":"## Introdução\n\nThe Saleor Auth SDK é uma biblioteca poderosa e leve (abaixo de 3kB gzipped) projetada para integrar autenticação e autorização seguras e personalizáveis nas suas lojas virtuais alimentadas pelo Saleor. Ela otimiza o processo de gerenciamento de sessões de usuário, tokens e vários métodos de autenticação, garantindo uma experiência de usuário robusta e segura.\n\n## Instalação\n\nComeçar a usar o Saleor Auth SDK é simples. Você pode instalá-lo via npm ou yarn:\n\nbash\nnpm install @saleor/auth-sdk\n# ou\nyarn add @saleor/auth-sdk\n\n\n## Exemplos\n\nO SDK oferece suporte abrangente para várias configurações do Next.js e clientes GraphQL.\n\n### Next.js App Router\n\nO SDK suporta tanto o Next.js 13/14 (cookies síncronos) quanto o Next.js 15 (cookies assíncronos). Aqui está uma visão rápida da configuração do cliente para o Next.js 15:\n\nts\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\n### Next.js Pages Router com Apollo Client\n\nIntegre com o Apollo Client envolvendo seu aplicativo com `<SaleorAuthProvider>` e `<ApolloProvider>`, e usando `useAuthChange` para gerenciar as mudanças de sessão. O método `fetchWithAuth` garante requisições autenticadas.\n\ntsx\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 = \"<your Saleor API URL>\";\n\nconst saleorAuthClient = createSaleorAuthClient({ saleorApiUrl });\n\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    <SaleorAuthProvider client={saleorAuthClient}>\n      <ApolloProvider client={apolloClient}>\n        <Component {...pageProps} />\n      </ApolloProvider>\n    </SaleorAuthProvider>\n  );\n}\n\n\n### Next.js Pages Router com urql\n\nDe forma semelhante ao Apollo, a integração com `urql` envolve `<SaleorAuthProvider>` e `<Provider>`, com `useAuthChange` para atualizar o cliente ao fazer login/logout.\n\ntsx\nimport { AppProps } from \"next/app\";\nimport { Provider, cacheExchange, fetchExchange, ssrExchange, createClient, Client } from \"urql\";\nimport { SaleorAuthProvider, useAuthChange } from \"@saleor/auth-sdk/react\";\nimport { createSaleorAuthClient } from \"@saleor/auth-sdk\";\nimport { useState } from \"react\";\n\nconst saleorApiUrl = \"<your Saleor API URL>\";\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  const [urqlClient, setUrqlClient] = useState<Client>(makeUrqlClient());\n\n  useAuthChange({\n    saleorApiUrl,\n    onSignedOut: () => setUrqlClient(makeUrqlClient()),\n    onSignedIn: () => setUrqlClient(makeUrqlClient()),\n  });\n\n  return (\n    <SaleorAuthProvider client={saleorAuthClient}>\n      <Provider value={urqlClient}>\n        <Component {...pageProps} />\n      </Provider>\n    </SaleorAuthProvider>\n  );\n}\n\n\n### OpenID Connect\n\nO SDK também suporta OpenID Connect para fluxos de autenticação externa, simplificando a integração com provedores de identidade de terceiros.\n\nPara exemplos completos e guias detalhados, consulte a [documentação oficial](https://docs.saleor.io/docs/3.x/api-usage/authentication) e o [repositório de exemplo](https://github.com/saleor/example-auth-sdk/tree/app/ssr/page.tsx).\n\n## Porquê usar\n\nO Saleor Auth SDK oferece várias vantagens convincentes para desenvolvedores que constroem lojas virtuais Saleor:\n\n*   **Autenticação Segura**: Implementa mecanismos robustos de autenticação e autorização prontos para uso.\n*   **Leve**: Com um tamanho de pacote abaixo de 3kB (gzipped), mantém seu aplicativo rápido e com bom desempenho.\n*   **Compatibilidade com Next.js**: Fornece soluções personalizadas para App Router (Next.js 13/14 e 15) e Pages Router, garantindo ampla compatibilidade.\n*   **Independente de Cliente GraphQL**: Integra-se perfeitamente com clientes GraphQL populares como Apollo Client e urql.\n*   **Personalizável**: Oferece flexibilidade para se adaptar a requisitos de autenticação específicos.\n*   **Desenvolvimento Simplificado**: Abstrai as complexidades da autenticação, permitindo que os desenvolvedores se concentrem na lógica de negócios principal.\n\n## Links\n\nEncontre mais informações e contribua para o Saleor Auth SDK:\n\n*   [Repositório GitHub](https://github.com/saleor/auth-sdk)\n*   [Pacote npm](https://www.npmjs.com/package/@saleor/auth-sdk)\n*   [Documentação Oficial](https://docs.saleor.io/docs/3.x/api-usage/authentication)\n*   [Discord do Saleor](https://saleor.io/discord)\n*   [Twitter do Saleor](https://twitter.com/getsaleor)","metrics":{"detailViews":7,"githubClicks":13},"dates":{"published":null,"modified":"2025-11-29T08:00:58.000Z"}}