Using PKCE to Communicate Between React and Native Mobile SDKs

Rate this content

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.

8 min
02 Jun, 2023


Sign in or register to post your comment.

AI Generated Video Summary

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.

3. Protocol Explanation

Short description:

The server generates an authorization code and sends it to the client. The client sends the authorization code and the original key to the server for comparison. If everything matches, the exchange is successful and the protocol is secure.

But I don't want to focus on it, because it's just an encryption layer, and it's not interesting. The challenge is then received by the server, it's saved, and the server answers with its own generated code. So it generates some random string. It's called the authorization code, and that's what it answers the client. To complete the protocol, the exchange, the client takes the authorization code just received and sends in the original key, the unhashed version. Now the back-end can compare codes and hash the verifier, the original key, and compare it to the challenge it had saved. If everything matches, we have a successful exchange, and everyone's happy. But if something is misaligned, everything's deleted and you have to start over. And the nice thing about this protocol, if you notice, the client never sends the same thing on the communication channel. You can't really deduce the verifier from the challenge, right? That's how hashing functions work, otherwise we'll all be in big trouble. So getting it in the middle of this protocol is quite hard, and it makes things very secure.

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
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
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
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
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
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.
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
- 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
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.