Add OIDC Pluggin support

saleor · Jun 7, 2023 · c6d04d6 · c6d04d6
1 parent 79a195f
commit c6d04d6
Show file tree

Hide file tree

Showing 14 changed files with 1,022 additions and 570 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -15,7 +15,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.0.0
+          version: 8
 
       - uses: actions/setup-node@v3
         with:

diff --git a/README.md b/README.md
@@ -136,6 +136,65 @@ const response = await signIn({
 });
 ```
 
+### Next.js (Pages Router) with OpenID Connect
+
+Setup `_app.tsx` as described above. In your login component trigger the external auth flow using the following code:
+
+```tsx
+import { Inter } from 'next/font/google'
+
+import { useSaleorAuthContext, useSaleorExternalAuth } from '@saleor/auth-sdk/react'
+import { ExternalProvider } from '@saleor/auth-sdk';
+import Link from 'next/link';
+import { gql, useQuery } from '@apollo/client';
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function Home() {
+  const { loading: isLoading, error, data } = useQuery(gql`query CurrentUser { me { id email firstName lastName } }`);
+
+  const { authURL, loading } = useSaleorExternalAuth({
+    saleorURL: '<your Saleor instance>',
+    provider: ExternalProvider.OpenIDConnect,
+    redirectURL: 'http://localhost:5375/api/auth/callback',
+  });
+
+  const { signOut } = useSaleorAuthContext();
+
+  if (loading || isLoading) {
+    return <div>Loading...</div>;
+  } else if (data && data.me) {
+    return (
+      <div>
+        {JSON.stringify(data)}
+        <button onClick={() => signOut()}>Logout</button>
+      </div>
+    )
+  } else if (authURL) {
+      return (
+      <div>
+        <Link href={authURL}>Login</Link> 
+      </div>
+      )
+  } else {
+    return (
+      <div>Something went wrong</div>
+    )
+  }
+}
+```
+
+You also need to define the auth callback. In `pages/api/auth` create the `callback.ts` with the following content:
+
+```ts
+import { ExternalProvider, SaleorExternalAuth } from '@saleor/auth-sdk';
+import { createSaleorExternalAuthHandler } from '@saleor/auth-sdk/next'
+
+const externalAuth = new SaleorExternalAuth('<your Saleor instance URL>', ExternalProvider.OpenIDConnect)
+
+export default createSaleorExternalAuthHandler(externalAuth);
+```
+
 ## FAQ
 
 ## How do I sign out in checkout?

diff --git a/package.json b/package.json
@@ -19,14 +19,16 @@
   "author": "Saleor Team",
   "license": "BSD-3-Clause",
   "dependencies": {
+    "cookie": "^0.5.0",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6"
   },
   "peerDependencies": {
-    "@apollo/client": "^3.7.14",
+    "@apollo/client": "^3.7.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "urql": "^4.0.2"
+    "urql": "^4.0.3",
+    "next": "^13.4.4"
   },
   "peerDependenciesMeta": {
     "@apollo/client": {
@@ -40,38 +42,43 @@
     },
     "urql": {
       "optional": true
+    },
+    "next": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@apollo/client": "^3.7.14",
+    "@apollo/client": "^3.7.15",
+    "@types/cookie": "^0.5.1",
     "@types/debug": "^4.1.8",
-    "@types/node": "^20.2.3",
+    "@types/js-cookie": "^3.0.3",
+    "@types/node": "^20.2.5",
     "@types/node-fetch": "^2.6.4",
-    "@types/react": "18.2.6",
+    "@types/react": "18.2.8",
     "@types/react-dom": "^18.2.4",
     "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-react": "^4.0.0",
     "clean-publish": "^4.2.0",
-    "eslint": "8.41.0",
+    "eslint": "8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "jsdom": "22.0.0",
+    "jsdom": "22.1.0",
     "prettier": "2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "release-it": "^15.10.3",
+    "release-it": "^15.11.0",
     "tsup": "^6.7.0",
-    "typescript": "^5.0.4",
-    "urql": "^4.0.2",
-    "vite": "^4.3.8",
-    "vitest": "^0.31.1",
+    "typescript": "^5.1.3",
+    "urql": "^4.0.3",
+    "vite": "^4.3.9",
+    "vitest": "^0.31.4",
     "vitest-fetch-mock": "0.2.2"
   },
   "lint-staged": {
@@ -95,6 +102,11 @@
       "import": "./react/index.mjs",
       "require": "./react/index.js"
     },
+    "./next": {
+      "types": "./next/index.d.ts",
+      "import": "./next/index.mjs",
+      "require": "./next/index.js"
+    },
     ".": {
       "types": "./index.d.ts",
       "import": "./index.mjs",