Sharing auth form mobile in to shopify webview

[batmanashvili]

I have a react native application and a web shopify app.
In react native I use webview to display my shopify app for mobile.

I wonder how is it possible to share the authorization from mobile device webview + shopify.

Installing shopify sdk? or injecting cookies into webview? or injecting jwt token into webview?
if you had such an experience I appreciate sharing your knowledge with me.

The goal is to use shopify app in webview, but have authentication with biometrics on react native side.

[Vi-WizzCommerce]

გამარჯობა @batmanashvili !

Great question — you’re trying to bridge biometric authentication in React Native with authenticated access to a Shopify web app in a WebView, which isn’t trivial but definitely possible.

Recommended High-Level Strategy1. Authenticate the user natively (with biometrics + secure storage).

1. Fetch or generate a secure token (JWT/session cookie) after biometric auth.

2. Inject the token into the WebView securely (via headers or cookies).

3. Web app validates and uses the token to log the user into Shopify.

Option 1: Inject Shopify Session Cookie into WebView (Most Native)

If you’re using Shopify Admin API or embedded app model, Shopify expects a valid session token/cookie for access.

Implementation flow:1. React Native side (after biometric auth):

• Fetch a session token or auth cookie (e.g. from your server or Shopify OAuth endpoint).

• Inject it into the WebView manually before loading the URL.

1. Use react-native-cookies or WebView injectedCookies feature (depending on platform):

   1. import CookieManager from ‘@react-native-cookies/cookies’;

      await CookieManager.set(‘https://yourshopifyapp.com’, {
      name: ‘shopify_app_session’,
      value: ‘YOUR_SESSION_TOKEN’,
      domain: ‘yourshopifyapp.com’,
      path: ‘/’,
      version: ‘1’,
      secure: true,
      httpOnly: true,
      });

2. Load WebView:

   1. <WebView source={{ uri: ‘https://yourshopifyapp.com’ }} />
   2. Shopify will now read this session cookie and treat the user as authenticated.

Option 2: Inject a JWT and Perform Login via URL Parameter or Header

Another route: generate a short-lived JWT on your server after biometric auth and inject it via WebView’s headers or URL param.

1. React Native app (after biometric):

   • Call your backend to get a JWT or temporary session link.

   • Pass this token into the WebView.

2. WebView:

   1. <WebView
      source={{
      uri: ‘https://yourshopifyapp.com?auth_token=YOUR_JWT’,
      }}
      />

3. Web App:

   1. On load, detect the auth_token param.

   2. Validate the JWT with your server.

   3. If valid, create the session and set Shopify cookies internally.

   4. Important: Make sure JWTs are:

      • Short-lived (5–10 min)

      • Signed securely

      • Transmitted via HTTPS only

Additional Tools & Libraries- react-native-webview: lets you inject JS, headers, or cookies.

• react-native-cookies: for cookie management.

• Your backend should handle Shopify OAuth + session creation logic.

Security Best Practices- Always validate tokens server-side — never in JS.

• Secure tokens with short TTL and audience checks.

• Avoid long-lived tokens or raw credentials in WebView.

• Consider disabling copy/paste if sensitive info is passed.

Suggested Flow (Summary)

User opens app →
Biometric auth →
Get session JWT (or cookie) from backend →
Inject into WebView →
WebView loads Shopify app with valid auth →
User is seamlessly logged in

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!