Saleor
  • Product
    • Merchandising
      Product Information Management
    • Development
      Developer Experience in focus
    • Promotions
      Advanced marketing tools
    • Checkout API
      Smooth payment process
    • Operations
      Order Management System
    • Apps
      Extend with external services
  • Resources
    • Solutions
    • Other
    • Global Commerce
      Multiple storefronts and channels
    • Composable
      Combine components
    • B2B
      For tailor made B2B commerce
    • Headless commerce
      Tech-agnostic backend
    • Commerce as Code
      A better way to build commerce
    • Enterprise
      Composable commerce at scale
    • Changelog
      Follow product updates.
  • Docs
  • Showcase
  • Experts
  • Pricing
Log inSign up

← Back to Blog

UpdatesJun 20, 2023
, Jakub Neander

Saleor Auth SDK

Auth SDK is our new library for seamless integration of secure and customizable authentication and authorization functionality into Saleor-powered e-commerce applications.

Our goal is to help developers quickly add authentication flows to their e-commerce applications. It unifies our internal approach to authentitication at Saleor, with additions and improvements based on feedback from our user community.

Auth SDK is written in TypeScript and has been engineered with a framework-agnostic design. By incorporating a high degree of abstraction and flexibility into its architecture, this approach ensures that the SDK maintains compatibility with any existing or future frameworks.

Features

The Auth SDK introduces several features that make it easier for developers to incorporate authentication into their applications. Notably, the SDK has built-in adapters for popular GraphQL clients such as Apollo Client and urql. Additionally, we've added support for OpenID Connect, which is configurable as a plugin in Saleor Dashboard.

Apollo & urql Adapters

The Saleor Auth SDK integrates with both Apollo and urql GraphQL clients using built-in adapters. We have detailed example implementations on how to set up your application with Apollo and urql in the official documentation. We are open to adding other adapters in the future. If you have any specific ones in mind, please let us know!

OpenID Connect Compatibility

We have made the compatibility of Saleor Auth SDK with OpenID Connect, making it easier to use third-party services for user authentication. You can use the new useSaleorExternalAuth hook to trigger the external authentication flow.

Better Handling of User Actions

The SDK now offers enhanced handling of user actions, including sign-in, sign-out, and password reset. By utilizing useSaleorAuthContext(), you can efficiently manage these user actions within your application.

Getting Started with Auth SDK

Auth SDK is available through the NPM package registry under the @saleor/auth-sdk name. To start using the SDK, install it into your project using any Node.js package manager:

Let’s take a Next.js application as an example. You start by initializing the Saleor Auth client using the useSaleorAuthClient hook, followed by setting up a specific GraphQL client (here it’s Apollo Client) and hooking up the onSignedIn / onSignedOut event methods; finally we wrap the root of our React.js application with <SaleorAuthProvider/>.

Feel free to check our step-by-step video guides on setting up Saleor Auth SDK in a Next.js application. The first one shows how to build a regular login/password functionality, the second one shows the OpenID Connect flow that integrates with our Dashboard plugin.

Stay tuned for more updates and improvements in the future, and happy coding!

    Footer

    Product

    • Merchandising
    • Promotions
    • Operations
    • Development
    • Checkout API
    • Apps
    • Headless

    Resources

    • Global Commerce
    • Composable
    • B2B
    • Enterprise
    • Showcase
    • Partners
    • Magento Migration
    • Blog

    Developers

    • API Documentation
    • Open source
    • Telemetry
    • Community: GitHub
    • Community: Discord

    Company

    • Newsletter
    • Contact us
    • Careers
    Manage Cookies Settings

    © Copyright 2018 - 2024 Saleor Commerce

    Terms of usePrivacy policy
    Saleor GitHub stars count: 20.9k
    npm install @saleor/auth-sdk
    import { AppProps } from "next/app";
    import { ApolloProvider } from "@apollo/client";

    import { SaleorAuthProvider, useAuthChange, useSaleorAuthClient } from "@saleor/auth-sdk/react";
    import { useAuthenticatedApolloClient } from "@saleor/auth-sdk/react/apollo";

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

    export default function App({ Component, pageProps }: AppProps) {
      const saleorAuth = useSaleorAuthClient({ saleorApiUrl: SaleorURL });

      const { apolloClient, reset, refetch } = useAuthenticatedApolloClient({
        uri: SaleorURL,
        fetchWithAuth: saleorAuth.saleorAuthClient.fetchWithAuth,
      });

      useAuthChange({
        saleorApiUrl: SaleorURL,
        onSignedOut: () => reset(),
        onSignedIn: () => refetch(),
      });

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