Passwordless login in Mobile SDK

[harishvitta]

Hi Team,

I was just wondering if we will have a Passwordless login approach in mobile SDK. That will help people who have different authentication inside Mobile apps.

https://www.shopify.com/partners/blog/introducing-customer-account-api-for-headless-stores

Also, Is there any way to use Firebase Authentication to log customers in the Shopify site to retrieve Customer data?

[joshgare]

We'd love to be able to support this in our mobile apps as well!

[victorteokw]

Any updates on this?

I want to implement login with website, and redirect back to the iOS app. Is this possible currently?
For example, I have a storefront which is "https://mystore.com", I want the app to open "https://mystore.com" to sign up or in, and then redirect back to this app with credentials.
Is this possible?

[yalp]

You can implement password less login using the Customer Account API:

1. The app loads in a webview the /oauth/authorize request, passing a redirect_uri of the form shop.{shop_id}* like shop.123345.app://callback that the app must be able to intercept from the webview.
2. The user authenticates, then the webview redirects to shop.12345.app://callback?code=ABCD.
3. The app intercepts the callback and extracts the code parameter.
4. The app uses the code to make the /oauth/token request to retrieve a Customer access token.

Previously, you had to exchange the Customer access token to a Storefront access token using the storefrontCustomerAccessTokenCreate mutation but this is now deprecated and you can use the Customer access token directly in the MobileSDK.

[victorteokw]

Hi @yalp, how can I use the Customer access token directly in the MobileSDK? It won't work.

From the above mentioned 4. The app uses the code to make the /oauth/token request to retrieve a Customer access token., I get this

Output(accessToken: "shcat_eyJraWQiOiIwIiwiYWxnIjoiRUQyNTUxOSJ9.eyJzaG9wSWQiOjcxMTM2NTEwMjA3LCJjaWQiOiJzaHBfZWMzMzI0YzktOWQyYy00ZjY4LTliNDItNDRjOTY2NmU2NWFhIiwiaWF0IjoxNzM3NTU3NzY0LCJleHAiOjE3Mzc1NjEzNjQsImlzcyI6Imh0dHBzOlwvXC9zaG9waWZ5LmNvbVwvYXV0aGVudGljYXRpb25cLzcxMTM2NTEwMjA3Iiwic3ViIjo3NzE0ODk5ODg2MzM1LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBjdXN0b21lci1hY2NvdW50LWFwaTpmdWxsIn0.m3kKpGRFbaUo4zMMoKuQ1sZG4gKlb29JRb2JkXCboZ10usr03Fqfv0FC9DS182vfZjQJN1PkVviP3LXtlLq4Cg", idToken: "eyJraWQiOiJpZF8wIiwiYWxnIjoiUlMyNTYifQ.eyJzaG9wSWQiOjcxMTM2NTEwMjA3LCJjaWQiOiJzaHBfZWMzMzI0YzktOWQyYy00ZjY4LTliNDItNDRjOTY2NmU2NWFhIiwiaWF0IjoxNzM3NTU3NzY0LCJleHAiOjE3Mzc1NTgzNjQsImlzcyI6Imh0dHBzOlwvXC9zaG9waWZ5LmNvbVwvYXV0aGVudGljYXRpb25cLzcxMTM2NTEwMjA3Iiwic3ViIjo3NzE0ODk5ODg2MzM1LCJzaWQiOiIwMUpKNzNENjUzR1BWTkUwVEdNS0dXUU5CMSIsImVtYWlsIjoieWVhbm55bGFtQGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJhdWQiOiJzaHBfZWMzMzI0YzktOWQyYy00ZjY4LTliNDItNDRjOTY2NmU2NWFhIn0.Yx5g7V0QRGvFjgubp3SRNeyDeGX_piPaRnP6Emf39UEqsSeR38vscM2Cy-OwF33By-ub-O0xMaOzKw6t3aH9bKH0LUBsDyyqrkRDWrUVr2RBa3Sru6NJEpzySObomuR0cflUcF89ALZeWYCMlOHVgDC8BWX8atfgfskCtkRDS0xXasn3j3WU5ShAdDtWNZ72NlnYvYh7g8T_w1PMpG2VM7jNmK0iqAIpcQ1cna0o2wJKOwKPxhtYTNPameLR88DkORTJDqb-qQZpcw6ZMvoxlUnUnh9gnaSOjN6yuJFgYML8IePvOI7oAfhze82orwf9G6yZHjcr6vGrNCiIaHqxndJ8HJo_6F772xrTYu5HDKZNAO33aRxEVOE9SdkBWZ5QnCxoFMLK4J7kWw4HstRZwj82ns_Zm9w01sMc9moirRvngJvvtM-O3sorQNkd1H5jYNvs9N2h_G9uLx4cHLjEzcATAfl_9tSY48KQTDrEFi9J4ZcbsAjhDaf4QhQnJbK7LlwEfhWT4j10eeVjmfD2N8xGsubt9YCGrLX737q81qrOUWj7r-B1yc1fCu5vYBeiPbANaNdFEDm3-lvPhNzEnrHcilci2KQkTrR8tUOTwnWlSfH4XaSj_vWytgDPqSmfoeuCHTZ-5GG9uHQ71YPyEg1zW4Q2XC-97u2CMNBHp74", expiresIn: 3600)

If take accessToken from the previous output, the customer that returned is null.

    let buyerInput = Storefront.BuyerInput.create(customerAccessToken: accessToken)
    let context = Storefront.InContextDirective(buyer: buyerInput)
    let customerQuery = Storefront.buildQuery(inContext: context) { $0
        .shop { $0
            .name()
        }
        .customer(customerAccessToken: accessToken) { $0
            .id()
            .firstName()
            .lastName()
            .email()
            .addresses { $0
                .edges { $0
                    .node { $0
                        .address1()
                        .address2()
                        .city()
                        .company()
                        .country()
                        .firstName()
                        .lastName()
                        .province()
                        .provinceCode()
                        .phone()
                        .zip()
                    }
                }
            }
        }
    }

[victorteokw]

The output is

see his profile: <QueryRoot: ["shop": {
    name = "The shop name";
}, "customer": <null>]>

[victorteokw]