Saleor Auth SDK: Streamlined Authentication for Next.js Storefronts

Introdução

A 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 a Saleor Auth SDK é simples. Você pode instalá-la via npm ou yarn:

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

Exemplos

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

Next.js App Router

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

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.

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.

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

A 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 e o repositório de exemplo.

Porquê usar

A 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 a Saleor Auth SDK:

• Repositório GitHub
• Pacote npm
• Documentação Oficial
• Discord do Saleor
• Twitter do Saleor