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:

npm install @saleor/auth-sdk

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

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>
);
}

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!

    By accepting our usage of third-party software such as Google Tag Manager, you help us to deliver a better website experience to all our users. To see our full privacy policy, click here (links to Privacy Policy).