Usando PKCE para comunicarse entre React y SDKs móviles nativos

Rate this content
Bookmark

Es importante tener un sistema de autenticación sin fricciones, seguro y de alto rendimiento para cualquier aplicación, ya sea web o móvil. En esta charla relámpago, Itai Hanski aborda la importancia de la autenticación y cómo el equipo de Descope utilizó PKCE para comunicarse entre su aplicación web React y los SDKs móviles nativos.

8 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla aborda la comunicación entre aplicaciones/web de React y aplicaciones/SDKs móviles nativos. Explora los desafíos de incrustar código web en un WebView y propone ejecutar el navegador en un modo incrustado. Se destaca el uso de enlaces profundos y el protocolo Pixie como solución para intercambiar datos de forma segura entre el código web y las aplicaciones nativas. El protocolo Pixie implica generar un código de autorización y compararlo con la clave original para el intercambio seguro de datos.

Available in English

1. Introducción

Short description:

Hola a todos. Mi nombre es Itay Hansky. Soy de la empresa Scope. Quiero hablar sobre la comunicación entre aplicaciones React o aplicaciones web y aplicaciones nativas o SDKs. ¿Alguna vez has creado algo genial para la web pero has querido usarlo en una aplicación nativa?

Hola a todos. Mi nombre es Itay Hansky. Soy de la empresa Scope. Y vine a hablar un poco sobre la comunicación entre aplicaciones React o aplicaciones web en general y aplicaciones nativas o SDKs. Quiero comenzar con una pregunta para que entiendan hacia dónde voy con esto. ¿Alguna vez has creado algo para la web que fuera realmente genial, pero has querido usarlo dentro de una aplicación nativa? Bueno, eso es exactamente lo que nos pasó en Scope, donde ofrecemos autenticación y gestión de usuarios como servicio. Y una de nuestras características más geniales es que puedes personalizar tu propia autenticación en nuestro editor sin código, incluyendo la interfaz de usuario y todo, y con unas pocas líneas de integración, tener una pantalla de inicio de sesión muy bonita y autenticación en tus aplicaciones web, lo cual es realmente genial, pero no queríamos dejar atrás a nuestros desarrolladores de aplicaciones nativas, así que pensamos, ¿cómo podemos llevar esta gran capacidad a nuestros desarrolladores nativos? Lo primero que consideramos fue construirlo desde cero, ¿verdad? El problema es que requiere mucho esfuerzo, tiempo y recursos, y pensamos que podríamos usarlos mejor en otro lugar.

2. Embedding Web Code and Utilizing Deep Links

Short description:

Consideramos incrustar el código web dentro de un WebView, pero los WebViews no son seguros y algunos métodos de autenticación no funcionarán. Por lo tanto, decidimos ejecutar el navegador en un modo incrustado, haciéndolo sentir como parte de la aplicación. Sin embargo, los procesos móviles están aislados, por lo que no podemos acceder a los datos entre procesos. Para resolver esto, utilizamos deep links para manejar ciertas URL dentro de la aplicación. También implementamos Pixie, un protocolo de intercambio de código de prueba de clave, para intercambiar datos de manera segura entre el código web y las aplicaciones nativas.

Sé que algunos de ustedes se identificarán. Entonces, lo siguiente que consideramos fue, ¿qué tal si simplemente lo tomamos e incrustamos dentro de nuestra interfaz de usuario utilizando un WebView? Para aquellos que no lo saben, un WebView es básicamente un widget de interfaz de usuario que ejecuta una versión en miniatura del navegador, por lo que podemos hacer que el código web se ejecute allí. El problema es que los WebViews se consideran inseguros y, de hecho, algunos de nuestros métodos de autenticación simplemente no se ejecutarán si se ejecutan dentro de un WebView.

Entonces nos quedamos con el navegador, pero afortunadamente para nosotros, podemos ejecutar el navegador en un modo incrustado, lo que se siente un poco mejor para el usuario. No parece que estés saliendo de la aplicación cuando realmente cambias al navegador. Parece que es parte de la aplicación, aunque técnicamente se está ejecutando en un proceso diferente.

Bien, genial. Entonces tenemos nuestras soluciones listas, así que supongo que todo lo que tenemos que hacer es lanzar nuestro navegador incrustado, Safari o Chrome, y ejecutar nuestro flujo, y luego obtener la devolución de llamada de alguna manera en nuestro código nativo o ejecutar algún JavaScript o hackearlo. Bueno, desafortunadamente, los procesos móviles están completamente aislados. Eso significa en términos simples que no puedes acceder realmente a los datos entre procesos, y eso es una buena noticia para nosotros, los usuarios del teléfono móvil, porque de lo contrario las cosas serían un desastre.

Entonces, ¿qué podemos hacer? Podemos iniciar el navegador, podemos lanzarlo, ¿verdad? Entonces, ¿cómo obtendríamos algo de vuelta en la capa nativa? Podemos utilizar deep links. Los deep links son una forma para que las aplicaciones móviles declaren que pueden manejar ciertas URL en lugar de abrirlas en el navegador. Piensa en la última vez que recibiste un mensaje de texto con un enlace de YouTube y cuando hiciste clic en él, se abrió la aplicación, ¿verdad? No el navegador. Es el mismo concepto aquí.

Bien, genial. Ahora tenemos una forma de volver a nuestro código nativo, pero no podemos simplemente enviar la sesión en la URL de redireccionamiento porque eso es completamente inseguro. Deberíamos tener algún tipo de protocolo de intercambio en su lugar, y ahí es donde entra Pixie. Pixie o PKCE es un protocolo interesante. Significa Proof-of-Key Code Exchange (Intercambio de Código de Prueba de Clave), y puedes implementarlo en cualquier momento que lo necesites. Está orientado hacia dispositivos móviles, pero no necesariamente. Voy a explicar los principios de Pixie en general para que lo entendamos, y luego te mostraré cómo lo usamos para ejecutar flujos en nuestras aplicaciones nativas. Entonces, Pixie funciona así. El cliente genera el código. Esto se considera una clave. Es solo una matriz aleatoria de bytes y se realiza un hash de esta clave. Este hash es donde todo comienza. Esto se considera el desafío. Este desafío se envía al servidor. La comunicación es base64. Pero no quiero centrarme en eso, porque es solo una capa de cifrado y no es interesante.

3. Protocol Explanation

Short description:

El servidor genera un código de autorización y lo envía al cliente. El cliente envía el código de autorización y la clave original al servidor para compararlos. Si todo coincide, el intercambio es exitoso y el protocolo es seguro.

Pero no quiero centrarme en eso, porque es solo una capa de cifrado y no es interesante. El desafío es recibido por el servidor, se guarda y el servidor responde con su propio código generado. Así que genera una cadena aleatoria. Se llama código de autorización y eso es lo que responde el cliente. Para completar el protocolo, el intercambio, el cliente toma el código de autorización recién recibido y envía la clave original, la versión no hasheada. Ahora el backend puede comparar los códigos y hashear el verificador, la clave original, y compararlo con el desafío que había guardado. Si todo coincide, tenemos un intercambio exitoso y todos están contentos. Pero si algo está desalineado, todo se borra y hay que empezar de nuevo. Y lo bueno de este protocolo, si te das cuenta, es que el cliente nunca envía lo mismo en el canal de comunicación. No puedes deducir realmente el verificador del desafío, ¿verdad? Así es como funcionan las funciones de hash, de lo contrario estaríamos en grandes problemas. Por lo tanto, obtenerlo en medio de este protocolo es bastante difícil y hace que las cosas sean muy seguras. Entonces, ¿cómo lo usamos? Porque en realidad no tenemos un cliente, ¿verdad? Tenemos esta cosa híbrida de código nativo y React. La parte nativa inicia el proceso, como vimos en Pixie. Lo mismo crea el verificador, esa clave, y lo hashea, el desafío. Pero ahora, en lugar de enviarlo directamente al servidor, lanzamos nuestro navegador y colocamos el desafío en los parámetros de la URL. Y también agregamos un deep link, el que mencioné anteriormente, para que el servidor sepa cómo comunicarse de vuelta con el código nativo. Lo colocamos en los parámetros de la URL. Nuestra aplicación React, todo lo que tiene que saber es qué parámetros de URL tomar y enviarlos al backend, al servidor. Más allá de eso, no importa realmente, la aplicación React puede ejecutarse como lo haría normalmente, ejecutar el flujo con todas sus configuraciones. Y una vez que el usuario se autentica correctamente, luego reanudamos el protocolo. Luego, el servidor puede generar su código de autorización. Pero en lugar de enviarlo a la aplicación React en nuestro navegador, puede utilizar el deep link que tiene para llegar hasta el código nativo, que toma el código de autorización y ahora puede enviar el verificador y el código de autorización directamente de vuelta al servidor para un intercambio exitoso y ahora tenemos flujos web ejecutándose en nuestro código nativo. Si alguien tiene más preguntas sobre esto o sobre PKC en general, estaré encantado de responder. Estamos en un stand justo afuera. Muchas gracias a todos.

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
Top Content
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 Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
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 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
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 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
- 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
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
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.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
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
WorkshopFree
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.