# Saleor Auth SDK: Streamlined Authentication for Next.js Storefronts

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/saleor-auth-sdk
Generated for open source discovery and AI-assisted research.

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
OSRepos URL: https://osrepos.com/repo/saleor-auth-sdk

## 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.

## Topics

- apollo
- graphql
- nextjs
- saleor
- typescript
- urql
- authentication
- ecommerce

## Repository Information

Last analyzed by OSRepos: Sat Nov 29 2025 08:00:58 GMT+0000 (Western European Standard Time)
Detail views: 7
GitHub clicks: 13

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introdução

The 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.

## Instalação

Começar a usar o Saleor Auth SDK é simples. Você pode instalá-lo via npm ou yarn:

bash
npm install @saleor/auth-sdk
# ou
yarn add @saleor/auth-sdk


## Exemplos

O SDK oferece suporte abrangente para várias configurações do Next.js e clientes GraphQL.

### Next.js App Router

O 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:

ts
import { createSaleorAuthClient } from "@saleor/auth-sdk";
import { getNextServerCookiesStorageAsync } from "@saleor/auth-sdk/next/server";

const getServerAuthClient = async () => {
  const nextServerCookiesStorage = await getNextServerCookiesStorageAsync();
  return createSaleorAuthClient({
    saleorApiUrl: "…",
    refreshTokenStorage: nextServerCookiesStorage,
    accessTokenStorage: nextServerCookiesStorage,
  });
};


### Next.js Pages Router com Apollo Client

Integre 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.

tsx
import { AppProps } from "next/app";
import { ApolloProvider, ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { createSaleorAuthClient } from "@saleor/auth-sdk";
import { SaleorAuthProvider, useAuthChange } from "@saleor/auth-sdk/react";

const saleorApiUrl = "<your Saleor API URL>";

const saleorAuthClient = createSaleorAuthClient({ saleorApiUrl });

const httpLink = createHttpLink({
  uri: saleorApiUrl,
  fetch: saleorAuthClient.fetchWithAuth,
});

export const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

export default function App({ Component, pageProps }: AppProps) {
  useAuthChange({
    saleorApiUrl,
    onSignedOut: () => apolloClient.resetStore(),
    onSignedIn: () => {
      apolloClient.refetchQueries({ include: "all" });
    },
  });

  return (
    <SaleorAuthProvider client={saleorAuthClient}>
      <ApolloProvider client={apolloClient}>
        <Component {...pageProps} />
      </ApolloProvider>
    </SaleorAuthProvider>
  );
}


### Next.js Pages Router com urql

De forma semelhante ao Apollo, a integração com `urql` envolve `<SaleorAuthProvider>` e `<Provider>`, com `useAuthChange` para atualizar o cliente ao fazer login/logout.

tsx
import { AppProps } from "next/app";
import { Provider, cacheExchange, fetchExchange, ssrExchange, createClient, Client } from "urql";
import { SaleorAuthProvider, useAuthChange } from "@saleor/auth-sdk/react";
import { createSaleorAuthClient } from "@saleor/auth-sdk";
import { useState } from "react";

const saleorApiUrl = "<your Saleor API URL>";

const saleorAuthClient = createSaleorAuthClient({ saleorApiUrl });

const makeUrqlClient = () =>
  createClient({
    url: saleorApiUrl,
    fetch: saleorAuthClient.fetchWithAuth,
    exchanges: [cacheExchange, fetchExchange],
  });

export default function App({ Component, pageProps }: AppProps) {
  const [urqlClient, setUrqlClient] = useState<Client>(makeUrqlClient());

  useAuthChange({
    saleorApiUrl,
    onSignedOut: () => setUrqlClient(makeUrqlClient()),
    onSignedIn: () => setUrqlClient(makeUrqlClient()),
  });

  return (
    <SaleorAuthProvider client={saleorAuthClient}>
      <Provider value={urqlClient}>
        <Component {...pageProps} />
      </Provider>
    </SaleorAuthProvider>
  );
}


### OpenID Connect

O SDK também suporta OpenID Connect para fluxos de autenticação externa, simplificando a integração com provedores de identidade de terceiros.

Para 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).

## Porquê usar

O Saleor Auth SDK oferece várias vantagens convincentes para desenvolvedores que constroem lojas virtuais Saleor:

*   **Autenticação Segura**: Implementa mecanismos robustos de autenticação e autorização prontos para uso.
*   **Leve**: Com um tamanho de pacote abaixo de 3kB (gzipped), mantém seu aplicativo rápido e com bom desempenho.
*   **Compatibilidade com Next.js**: Fornece soluções personalizadas para App Router (Next.js 13/14 e 15) e Pages Router, garantindo ampla compatibilidade.
*   **Independente de Cliente GraphQL**: Integra-se perfeitamente com clientes GraphQL populares como Apollo Client e urql.
*   **Personalizável**: Oferece flexibilidade para se adaptar a requisitos de autenticação específicos.
*   **Desenvolvimento Simplificado**: Abstrai as complexidades da autenticação, permitindo que os desenvolvedores se concentrem na lógica de negócios principal.

## Links

Encontre mais informações e contribua para o Saleor Auth SDK:

*   [Repositório GitHub](https://github.com/saleor/auth-sdk)
*   [Pacote npm](https://www.npmjs.com/package/@saleor/auth-sdk)
*   [Documentação Oficial](https://docs.saleor.io/docs/3.x/api-usage/authentication)
*   [Discord do Saleor](https://saleor.io/discord)
*   [Twitter do Saleor](https://twitter.com/getsaleor)