Shopify Question posted in
The Shopify help center can be found here.

How to implement Shopify – Customer Login in React-Native or JavaScript?

I’m working on React-Native application with Shopify. In this application Customers (who will buy the products) is the only target user.

I wanted to implement a Login mechanism for customer but unable to find Shopify API for the same.

I have already gone through Storefront API and Customer API

Could you please guide me here.

Thanks.

Tags:

3

Answers


  1. 0

    Shopify provides a customer login route, so you simply wire up that. No need to re-invent the wheel. Examine any existing Shopify theme for inspiration. No need for any API calls.

    Login or Signup to reply.
  2. 0

    I got the solution for this.

    Prerequisites:

    • While integrating Shopify customer login, that respective customer must have a shop/store in Shopify.
    • Also, as there isn’t any specific support to create a Shopify app for mobile application, the backend should integrate the Shopify app and give the Redirection URL to the frontend.

    Steps:

    1. I’ve created a Shopify Connect button, if a user clicks on it, we should ask a user to put a Shopify Shop/Store Name(this shop/store name is mandatory).
    2. Once a user fills Shop/Store Name and clicks on the submit button, I’m calling my backend API which gives me a Callback URL in a response(which is a Shopify URL. This Shopify URL starts with https://${shop_name}.myshopify.com and this URL also contains some query params having redirect_uri).
    3. Then I called this whole Callback URL on a Webview(RN Webview).
    4. Users will see a Shopify login page if that respective user’s shop/store name is listed in Shopify. Then the user can log in and allow my application to access Shopify details of that particular user.
    5. Once the user’s authentication is done, Shopify calls the Redirection URL(this URL we’ve to whitelist while creating a Shopify App). We’ve specified backend’s HTML page URL as a Redirection URL, to show Success or Failure message. Also, this Redirection URL is as same as that of redirect_uri(provided that the query params are ignored) which I get in the query params of the Callback URL in step 2.
    6. Now in the RN Webview, a prop onNavigationStateChange is called whenever Webview’s state is changed. Using this prop, I figured out that Shopify Authentication is done, and Webview’s URL is now changed to Redirection URL(ie redirect_uri).
    7. As soon as I figured out the Webview’s URL is as same as the Redirection URL(provided that the query params are ignored), I showed the Webview for 3-5 seconds(Success or Failure Screen on Webview) and then I popped the Webview Screen from the React Navigation stack.
    8. After popping up the Webview Screen, I called my backend API to check the user’s status of Shopify integration and accordingly I showed the Alert message.

    This is a properly working example of Shopify Integration that I and my team have integrated using React Native and Python successfully.

    Login or Signup to reply.
  3. 0

    Use customerAccessTokenCreate mutation which will provide you the access token when you pass login credential as an input. This is actually work like login api. Here is the link https://shopify.dev/docs/storefront-api/reference/mutation/customeraccesstokencreate?api%5Bversion%5D=2020-04

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search