Using PKCE to Communicate Between React and Native Mobile SDKs

It’s important to have a frictionless, secure, and performant authentication system for any app, be it web or mobile. In this lightning talk, Itai Hanski covers the importance of authentication and how the Descope team used PKCE to communicate between their React web app and native mobile SDKs.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

The core problem 'the scoped' faced was how to integrate their web-based authentication and user management service into native applications.

WebViews are UI widgets that run a miniature version of a browser to display web content. They are considered insecure because some authentication methods may not function correctly inside them.

'The scoped' used an embedded browser approach with deep links and the PKCE (Proof-of-Key Code Exchange) protocol to securely integrate web authentication into native apps.

Deep links are URLs that direct users to specific content within a mobile app instead of a browser. They allow mobile applications to handle certain URLs directly.

PKCE, or Proof-of-Key Code Exchange, is a security protocol where the client generates a key (verifier), hashes it (challenge), and sends the challenge to the server. The server responds with an authorization code, and the client uses the original key to complete the exchange, ensuring secure communication.

In 'the scoped's approach, the native app starts the process by generating a verifier and challenge, launches a browser with these parameters, and uses deep links for communication. The React app handles the flow, and the server uses deep links to send authorization codes back to the native app for secure exchange.

Session data can't be sent on the redirect URL because it is insecure. Instead, an exchange protocol like PKCE is used to ensure secure data transfer.

The React app's role is to grab URL parameters and pipe them into the backend server, run the authentication flow, and allow the server to send authorization codes back to the native app using deep links.

Attendees can ask more questions about PKCE or the integration process at the booth right outside the presentation area.

Itay Hansky's talk focuses on communicating between React or web apps and native applications or SDKs.

Itai Hanski
Itai Hanski
8 min
02 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Talk discusses communication between React apps/web apps and native applications/SDKs. It explores the challenges of embedding web code in a WebView and proposes running the browser in an embedded mode. The use of deep links and the Pixie protocol is highlighted as a solution for securely exchanging data between the web code and native applications. The Pixie protocol involves generating an authorization code and comparing it with the original key for secure data exchange.

1. Introduction

Short description:

Hi, everyone. My name is Itay Hansky. I'm from the scope. I want to talk about communicating between React apps or web apps and native applications or SDKs. Have you ever built something nice for the web but wanted to use it in a native app?

Hi, everyone. My name is Itay Hansky. I'm from the scope. And I came to talk a little bit about communicating between React apps or web apps in general and native applications or SDKs. I want to kick things off with a question so you understand where I'm going with this. So have you ever built anything that was for the web, was really nice, but you wanted really to use it inside of a native application? Well, that's exactly what happened to us at the scoped, where we offer authentication and user management as a service. And one of our coolest features is that you can customize your own authentication in our no-code editor including UI and everything, and with a few lines of integration, have a very nice, fully fledged login screen and authentication in your web apps, which is really, really nice, but we didn't want to leave our native application builders behind, so we thought, how can we bring this nice capability to our native builders?

2. Embedding Web Code and Utilizing Deep Links

Short description:

We considered embedding the web code inside a WebView, but WebViews are insecure and some authentication methods won't work. So, we decided to run the browser in an embedded mode, making it feel like part of the application. However, mobile processes are sandboxed, so we can't access data between processes. To solve this, we used deep links to handle certain URLs within the application. We also implemented Pixie, a Proof-of-Key Code Exchange protocol, to securely exchange data between the web code and native applications.

I know some of you will relate. So the next thing we considered was, how about we just take it and embed it inside of our UI using a WebView? For those who don't know, a WebView is basically a UI widget which runs a miniature version of the browser, so we can just have the web code run in there. The problem is that WebViews are considered insecure, and actually, some of our authentication methods will simply not run if they're running inside of WebView.

So we were left with the browser, but fortunately for us, we can run the browser in an embedded mode, which feels for the user a little better. It doesn't feel like you're moving outside of the application when you actually switch to the browser. It feels like it's part of the application, even though technically we're running on a different process.

Okay, great. So we have our solutions set, so I guess all we have to do is launch our embedded browser, Safari or Chrome, and run our flow, and then get the callback somehow into our native code or run some JavaScript or hack into it. Well, unfortunately, mobile processes are completely sandboxed. That means in simple terms that you can't really access data between processes, and that's good news for us users of the mobile phone, because otherwise things would be a mess.

So what can we do? We can start the browser, we can launch it, right? So how would we get something back to the native layer? We can utilize deep links. Deep links is a way for mobile applications to declare that they can handle certain URLs instead of opening it in the browser. Think of the last time you got like a text message with a YouTube link, and when you clicked on it the application opened, right? Not the browser. So it's the same concept here.

Okay, great. So now we have a way to get back into our native code, but we can't simply send the session on the redirect URL because that's completely insecure. We should have some form of exchange protocol in place, and that's where Pixie comes in. Pixie or PKCE is a nice protocol. It stands for Proof-of-Key Code Exchange, and you can implement it any time you need. It's kind of geared toward mobile, but not necessarily so. I'm going to go over the Pixie principles in general just so we understand it, and then I'll show you how we used it to get flows running on our native applications. So, Pixie runs like this. The client generates the code. This is considered a key. It's just a random array of bytes and hashes this key. This hash is where everything starts. This is considered the challenge. This challenge is sent to the server. The communication is base64. But I don't want to focus on it, because it's just an encryption layer, and it's not interesting.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Power Fixing React Performance Woes
React Advanced 2023React Advanced 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Monolith to Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
How to Build an Interactive “Wheel of Fortune” Animation with React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.