Shopify Passwordless Login

Native iOS + Android Support

Quick Start

$ yarn add shopify-passwordless-login

Step 1 // Create a Storefront Access Token

Navigate to Passwordless Social Login in your Shopify Apps settings and scroll to Optional Install Instructions -> Native Apps. Paste the created token into this setting, allowing us to generate a CustomerAccessToken for Step 2.

Mailing a secure login link or logging in socially is simple:

import { login } from 'shopify-passwordless-login'

const
  store                    = 'dimensionsoftware', // YOUR-STORE.myshopify.com
  email                    = 'test@email.com',    // magic link destnation
  { passwordless, social } = login(store)

// initiate passwordless email
const r = await passwordless({ email })
if (r.success) {
  // login link successfully mailed
  alert(`Please check ${email} for a Login Link and Security Code matching ${r.code}`)
} else {
  // error
  console.warn(r.error)
}

// or, initiate passwordless social
// SocialParams is one of:  'facebook', 'linkedin', 'twitter', 'google'
const uri = social('facebook')
// uri can then be used as:
//   - the source for a <WebView />
//   - or, to kick-off OAuth, eg. with Google

Step 2 // Handle your Custom URI Scheme

Native Apps must respond to a custom URI scheme containing a Shopify CustomerAccessToken which we generate from your Storefront Access Token. First edit your app.json and the rest is simple:

import { Linking } from 'react-native'

// listen for open url via custom linking scheme
const handleRedirect = url => {
  if (!url && !url.length) return // guard
  const { path, queryParams } = Linking.parse(url)
  // path contains your CustomerAccessToken
  if (path.length)
    alert(
      `Linked to app with path: ${path} and data: ${JSON.stringify(
        queryParams
      )}`
    )
}
Linking.addEventListener('url', handleRedirect)          // app running in background
Linking.getInitialURL().then(url => handleRedirect(url)) // app launched

Optional Step 3 // Cart Checkout and Payment

Customers love your fast & secure Passwordless flow, loaded their cart up with goods and are ready to checkout! Passing the CustomerAccessToken through as a header to the webUrl from Shopify's Storefront API Checkout allows for a smooth Payment Gateway transition:

import { WebView } from 'react-native-webview'

<WebView
  style={{ flex: 1 }}
  source={{
    uri: webUrl, // from Shopify's Storefront API Checkout object
    headers: {   // from handleRedirect, above
      'X-Shopify-Customer-Access-Token': customerAccessToken
    }
  }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  startInLoadingState={true}
/>