Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including shopify-passwordless-login with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var shopifyPasswordlessLogin = require("shopify-passwordless-login")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

shopify-passwordless-login v1.2.0

The simplest way to add passwordless authentication to your Shopify store

Shopify Passwordless Login

Dimension Software contributions welcome HitCount TypeScript

Native iOS + Android Support

Login to Shopify, Passwordlessly using this example React Native codebase, no native modules to link & Expo friendly!

Shopify Passwordless Login for React Native Apps

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'

  store                    = 'dimensionsoftware', //
  email                    = '',    // 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

// 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)
      `Linked to app with path: ${path} and data: ${JSON.stringify(
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'

  style={{ flex: 1 }}
    uri: webUrl, // from Shopify's Storefront API Checkout object
    headers: {   // from handleRedirect, above
      'X-Shopify-Customer-Access-Token': customerAccessToken

Fresh Software by Dimension

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free