Create Auth API

src/api/APIProxy.ts

@@ -6,11 +6,10 @@ import {
 } from "apollo-client";
 import { GraphQLError } from "graphql";
 
-import { fireSignOut, getAuthToken, setAuthToken } from "../auth";
+import { getAuthToken, setAuthToken } from "../auth";
 import { MUTATIONS } from "../mutations";
 import { TokenAuth } from "../mutations/gqlTypes/TokenAuth";
 import { QUERIES } from "../queries";
-import { UserDetails } from "../queries/gqlTypes/UserDetails";
 import { RequireAtLeastOne } from "../tsHelpers";
 import {
   InferOptions,
@@ -25,97 +24,80 @@ import {
   isDataEmpty,
   mergeEdges,
 } from "../utils";
+import { BROWSER_NO_CREDENTIAL_API_MESSAGE } from "./Auth";
 
 export class APIProxy {
-  getAttributes = this.watchQuery(QUERIES.Attributes, data => data.attributes);
+  getAttributes = this.watchQuery(
+    QUERIES.Attributes,
+    (data) => data.attributes
+  );
 
   getProductDetails = this.watchQuery(
     QUERIES.ProductDetails,
-    data => data.product
+    (data) => data.product
   );
 
-  getProductList = this.watchQuery(QUERIES.ProductList, data => data.products);
+  getProductList = this.watchQuery(
+    QUERIES.ProductList,
+    (data) => data.products
+  );
 
   getCategoryDetails = this.watchQuery(
     QUERIES.CategoryDetails,
-    data => data.category
+    (data) => data.category
   );
 
-  getOrdersByUser = this.watchQuery(QUERIES.OrdersByUser, data =>
+  getOrdersByUser = this.watchQuery(QUERIES.OrdersByUser, (data) =>
     data.me ? data.me.orders : null
   );
 
   getOrderDetails = this.watchQuery(
     QUERIES.OrderDetails,
-    data => data.orderByToken
+    (data) => data.orderByToken
   );
 
   getVariantsProducts = this.watchQuery(
     QUERIES.VariantsProducts,
-    data => data.productVariants
+    (data) => data.productVariants
   );
 
-  getShopDetails = this.watchQuery(QUERIES.GetShopDetails, data => data);
+  getShopDetails = this.watchQuery(QUERIES.GetShopDetails, (data) => data);
 
   setUserDefaultAddress = this.fireQuery(
     MUTATIONS.AddressTypeUpdate,
-    data => data!.accountSetDefaultAddress
+    (data) => data!.accountSetDefaultAddress
   );
 
   setDeleteUserAddress = this.fireQuery(
     MUTATIONS.DeleteUserAddress,
-    data => data!.accountAddressDelete
+    (data) => data!.accountAddressDelete
   );
 
   setCreateUserAddress = this.fireQuery(
     MUTATIONS.CreateUserAddress,
-    data => data!.accountAddressCreate
+    (data) => data!.accountAddressCreate
   );
 
   setUpdateuserAddress = this.fireQuery(
     MUTATIONS.UpdateUserAddress,
-    data => data!.accountAddressUpdate
+    (data) => data!.accountAddressUpdate
   );
 
   setAccountUpdate = this.fireQuery(
     MUTATIONS.AccountUpdate,
-    data => data!.accountUpdate
+    (data) => data!.accountUpdate
   );
 
-  setPasswordChange = this.fireQuery(MUTATIONS.PasswordChange, data => data);
+  setPasswordChange = this.fireQuery(MUTATIONS.PasswordChange, (data) => data);
 
-  setPassword = this.fireQuery(MUTATIONS.SetPassword, data => data);
+  setPassword = this.fireQuery(MUTATIONS.SetPassword, (data) => data);
 
   client: ApolloClient<any>;
 
   constructor(client: ApolloClient<any>) {
     this.client = client;
   }
 
-  getUserDetails = (
-    variables: InferOptions<QUERIES["UserDetails"]>["variables"],
-    options: Omit<InferOptions<QUERIES["UserDetails"]>, "variables"> & {
-      onUpdate: (data: UserDetails["me"] | null) => void;
-    }
-  ) => {
-    if (this.isLoggedIn()) {
-      return this.watchQuery(QUERIES.UserDetails, data => data.me)(
-        variables,
-        options
-      );
-    }
-    if (options.onUpdate) {
-      options.onUpdate(null);
-    }
-    return {
-      refetch: () =>
-        new Promise<{ data: UserDetails["me"] }>((resolve, _reject) => {
-          resolve({ data: null });
-        }),
-      unsubscribe: () => undefined,
-    };
-  };
-
   signIn = (
     variables: InferOptions<MUTATIONS["TokenAuth"]>["variables"],
     options?: Omit<InferOptions<MUTATIONS["TokenAuth"]>, "variables">
@@ -126,7 +108,7 @@ export class APIProxy {
 
         const data = await this.fireQuery(
           MUTATIONS.TokenAuth,
-          data => data!.tokenCreate
+          (data) => data!.tokenCreate
         )(variables, {
           ...options,
           update: (proxy, data) => {
@@ -138,12 +120,19 @@ export class APIProxy {
             if (!handledData.errors && handledData.data) {
               setAuthToken(handledData.data.token);
               if (window.PasswordCredential && variables) {
-                navigator.credentials.store(
-                  new window.PasswordCredential({
-                    id: variables.email,
-                    password: variables.password,
-                  })
-                );
+                navigator.credentials
+                  .store(
+                    new window.PasswordCredential({
+                      id: variables.email,
+                      password: variables.password,
+                    })
+                  )
+                  .catch((credentialsError) =>
+                    console.warn(
+                      BROWSER_NO_CREDENTIAL_API_MESSAGE,
+                      credentialsError
+                    )
+                  );
               }
             }
             if (options && options.update) {
@@ -158,17 +147,6 @@ export class APIProxy {
       }
     });
 
-  signOut = () =>
-    new Promise(async (resolve, reject) => {
-      try {
-        fireSignOut(this.client);
-
-        resolve();
-      } catch (e) {
-        reject(e);
-      }
-    });
-
   attachAuthListener = (callback: (authenticated: boolean) => void) => {
     const eventHandler = () => {
       callback(this.isLoggedIn());
@@ -226,7 +204,7 @@ export class APIProxy {
       }
 
       const subscription = observable.subscribe(
-        result => {
+        (result) => {
           const { data, errors: apolloErrors } = result;
           const errorHandledData = handleDataErrors(
             mapFn,
@@ -246,7 +224,7 @@ export class APIProxy {
             }
           }
         },
-        error => {
+        (error) => {
           if (onError) {
             onError(error);
           }
@@ -281,7 +259,7 @@ export class APIProxy {
                 );
 
                 // use new result for metadata and mutate existing data
-                Object.keys(prevResultRef).forEach(key => {
+                Object.keys(prevResultRef).forEach((key) => {
                   prevResultRef[key] = newResultRef[key];
                 });
                 prevResultRef.edges = mergedEdges;

src/api/Auth/index.ts

@@ -0,0 +1,148 @@
+import { User } from "../../fragments/gqlTypes/User";
+import { ErrorListener } from "../../helpers";
+import { JobsManager } from "../../jobs";
+import { SaleorState, SaleorStateLoaded } from "../../state";
+import { StateItems } from "../../state/types";
+
+import { PromiseRunResponse } from "../types";
+import { DataErrorAuthTypes, FunctionErrorAuthTypes } from "./types";
+
+export const BROWSER_NO_CREDENTIAL_API_MESSAGE =
+  "Saleor SDK is unable to use browser Credential Management API.";
+
+export class AuthAPI extends ErrorListener {
+  /**
+   * Indicates if data is initialized, initially retrieved from cache or initially fetched.
+   */
+  loaded: boolean;
+  /**
+   * User object with currently signed in user data.
+   */
+  user?: User | null;
+  /**
+   * Indicates if user is signed in.
+   */
+  authenticated?: boolean;
+  /**
+   * Token used for user authentication.
+   */
+  token?: string;
+
+  private saleorState: SaleorState;
+  private jobsManager: JobsManager;
+
+  constructor(saleorState: SaleorState, jobsManager: JobsManager) {
+    super();
+    this.saleorState = saleorState;
+    this.jobsManager = jobsManager;
+
+    this.loaded = false;
+
+    this.saleorState.subscribeToChange(StateItems.USER, (user: User | null) => {
+      this.user = user;
+      if (this.loaded) {
+        this.authenticated = !!this.user;
+      }
+    });
+    this.saleorState.subscribeToChange(StateItems.SIGN_IN_TOKEN, (token) => {
+      this.token = token;
+    });
+    this.saleorState.subscribeToChange(
+      StateItems.LOADED,
+      (loaded: SaleorStateLoaded) => {
+        this.loaded = loaded.user && loaded.signInToken;
+        if (this.loaded) {
+          this.authenticated = !!this.user;
+        }
+      }
+    );
+
+    if (!this.saleorState.signInToken && window.PasswordCredential) {
+      this.autoSignIn();
+    }
+  }
+
+  /**
+   * Tries to authenticate user with given email and password.
+   * @param email Email used for authentication.
+   * @param password Password used for authentication.
+   * @param autoSignIn Indicates if SDK should try to sign in user with given credentials in future without explicitly calling this method. True by default.
+   */
+  signIn = async (
+    email: string,
+    password: string,
+    autoSignIn: boolean = true
+  ): PromiseRunResponse<DataErrorAuthTypes, FunctionErrorAuthTypes> => {
+    const { data, dataError } = await this.jobsManager.run("auth", "signIn", {
+      email,
+      password,
+    });
+
+    try {
+      if (autoSignIn && !dataError?.error && window.PasswordCredential) {
+        await navigator.credentials.store(
+          new window.PasswordCredential({
+            id: email,
+            password,
+          })
+        );
+      }
+    } catch (credentialsError) {
+      console.warn(BROWSER_NO_CREDENTIAL_API_MESSAGE, credentialsError);
+    }
+
+    await this.jobsManager.run("checkout", "provideCheckout", {
+      isUserSignedIn: !!data?.user,
+    });
+
+    return {
+      data,
+      dataError,
+      pending: false,
+    };
+  };
+
+  /**
+   * Sign out user by clearing cache, local storage and authentication token.
+   */
+  signOut = async (): PromiseRunResponse<
+    DataErrorAuthTypes,
+    FunctionErrorAuthTypes
+  > => {
+    await this.jobsManager.run("auth", "signOut", undefined);
+    try {
+      if (navigator.credentials && navigator.credentials.preventSilentAccess) {
+        await navigator.credentials.preventSilentAccess();
+      }
+    } catch (credentialsError) {
+      console.warn(BROWSER_NO_CREDENTIAL_API_MESSAGE, credentialsError);
+    }
+
+    return {
+      pending: false,
+    };
+  };
+
+  private autoSignIn = async () => {
+    let credentials;
+    try {
+      credentials = await (navigator.credentials as any).get({
+        password: true,
+      });
+    } catch (credentialsError) {
+      console.warn(BROWSER_NO_CREDENTIAL_API_MESSAGE, credentialsError);
+    }
+
+    if (credentials) {
+      const { dataError } = await this.signIn(
+        credentials.id,
+        credentials.password,
+        true
+      );
+
+      if (dataError?.error) {
+        this.fireError(dataError.error, DataErrorAuthTypes.SIGN_IN);
+      }
+    }
+  };
+}

src/api/Auth/types.ts

@@ -0,0 +1,5 @@
+export enum FunctionErrorAuthTypes {}
+export enum DataErrorAuthTypes {
+  "SIGN_IN",
+  "GET_USER",
+}