Introducing Apple Invites, a new app that brings people together for life’s special moments
Walmart Labs Open Sources Its Tool For Bringing React Native To Existing Mobile Apps - TechCrunch
Walmart is placing a big bet on React Native. With Electrode, the company's Walmart Labs division open sourced the React-based framework that powers Walmart.Com's frontend and today the same group is also launching Electrode Native, its tool for bringing React Native to existing native apps on iOS and Android.
The basics idea here is that Electrode Native allows large companies like Walmart to take their existing apps and slowly migrate parts of their code to React Native, Facebook's open source framework for building native apps in JavaScript. The tool aims to make the integration between React Native and other native apps as straightforward as possible. React Native simply becomes a third-party library that's used in the native app and the React Native code then lives in what Walmart Labs calls an "Electrode Native MiniApp."
Typically, developers who want to move their apps to React Native would have to either rewrite their app from the ground, build a quick and dirty integration that'll cost them later, or build a new platform and tooling for integrating React Native into their apps. Walmart went with the last option.
This approach also means developers can write their code for iOS and Android once (Walmart currently develops an iOS and Android app for all of its main brands) and maybe most importantly, that React Native code inside the app can be updated over the air without forcing users to download a new version of the native app.
Walmart's developers first used Electrode Native to update the shopping cart section of the Walmart mobile app. Originally, these were actually responsive web apps that were served in an embedded browser. The team also converted the Thank You page that appears when you complete your purchase and is now working on the checkout page.
Alexander Grigoryan, the senior director for software engineering, application platform and online grocery for Walmart Global eCommerce, tells me that his team looked at various options for building its cross-platform apps. "Solutions in the open source world similar to what we accomplished are 'PhoneGap' or 'Cordova.' Going down this route led to a noticeable difference in performance compared to other parts of our native app," he told me. "This was validated when we re-wrote those parts in React Native or mobile app technologies and saw metrics which showcased more engagement from our customers." The team also looked at Microsoft's Xamarin tools, but decided that it wouldn't give it benefits like reusable UI components , shared JavaScript modules and over-the-air updates as React Native. "Our front-end for web is also React, so it all just made sense for us to invest in React Native as the solution," said Grigoryan.
Grigoryan also stressed that Walmart Labs is no stranger to open source at this point. The company features 151 projects on its GitHub page. "We strongly believe that the return on our open source investment benefits the company and the community," he said. Grigoryan also added that this helps to motive engineers inside the company who want to make their contributions public and participate in the community, as well as engineers outside of the company who want to understand Walmart's cultural and technical directions, "which leads to much more interesting conversations during hiring."
If you're interested in checking out Electrode Native, you can find the documentation and code here.
Frederic was with TechCrunch from 2012 through 2025. He also founded SiliconFilter and wrote for ReadWriteWeb (now ReadWrite). Frederic covers enterprise, cloud, developer tools, Google, Microsoft, gadgets, transportation and anything else he finds interesting.
A Practical Guide To React Native Authentication - InfoWorld
Using React Native authentication to verify user identities is a relatively painless and straightforward process that not only protects your company's data and your user's privacy, but also improves the user experience.
Authentication is a crucial aspect of any app or service today, as it allows the app to determine who the user is and which actions they are authorized to perform.
React Native authentication refers to the process of verifying the identity of a user in a React Native app. This is typically done by asking the user to provide their login credentials, such as a username and password, and then checking those credentials against a database of authorized users.
React Native authentication is commonly implemented with OAuth 2.0, which allows users to sign in via popular third-party services such as Google, Facebook, or Twitter. There are several libraries you can use to implement authentication in React Native—we'll cover three of them in this article.
Why is React Native authentication important?React Native authentication is critical because it provides a secure way for users to access protected resources in a React Native app. Without proper user authentication, anyone could access sensitive information or perform actions that they should not be able to.
React Native authentication is important for:
OAuth2 is an open standard for authorization that's widely used to allow users to grant access to resources without sharing their credentials. In the context of React Native authentication, OAuth2 is commonly used to allow a user to sign in to an application using their existing credentials from a third-party service, such as Google, Facebook, or Twitter.
A common flow for OAuth2 in a React Native application is for the user to click a "Sign in with X" button, which then redirects them to the third-party service's login page. Once the user has successfully logged in to the third-party service, they are redirected back to the React Native application, where they grant permission for the application to access their resources.
Redirects are an important part of the OAuth2 flow in React Native applications. The redirects are used to redirect the user to the third-party service's login page, and then back to the React Native application after the user has successfully logged in. These redirects are typically implemented using the WebView component in React Native, which is used to display web pages within the mobile application.
What is Proof of Key Code Exchange or PKCE?Proof of Key Code Exchange, or PKCE, is an extension to the OAuth2 authorization code flow that provides additional security for public client applications. In the standard OAuth2 authorization code flow, an authorization code is exchanged for an access token. This can create security vulnerabilities, as a malicious actor could intercept the authorization code and use it to obtain an access token for the user's resources.
PKCE solves this problem by adding an extra step to the authorization code flow, where a code verifier is generated and passed along with the authorization code. The code verifier is then used to verify the authorization code when it is exchanged for an access token, providing an additional layer of security.
React Native authentication librariesThere is a variety of libraries you can use to implement authentication in your React Native apps. The three discussed here are only a few of the possible options—there are many more libraries you could use to implement authentication in React.
React Native App AuthReact Native App Auth is an open-source library for implementing authentication in React Native apps using OAuth 2.0 and OpenID Connect. It provides a set of tools and APIs for interacting with OAuth 2.0 and OpenID Connect-compliant identity providers, such as Google, Facebook, and Microsoft, to authenticate users.
React Native App Auth supports both Android and iOS platforms and can be easily integrated into a React Native app to handle authentication tasks, such as user login and logout, securely storing authentication tokens, and refreshing access tokens.
The library abstracts the underlying authentication protocol details, making it easier for developers to implement authentication in their apps without having to deal with the complexity of the underlying protocols.
React NavigationReact Navigation is a popular library for navigation in React Native apps. It provides tools and APIs for navigation between screens, handling navigation history, and configuring the navigation header.
React Navigation can be used in combination with a separate authentication library to implement authentication in a React Native app by controlling the navigation flow based on the authentication state.
React Native OAuthReact Native OAuth is a library for adding OAuth authentication to React Native apps. With React Native OAuth, developers can add OAuth authentication to their apps and interact with OAuth-compliant identity providers, such as Google, Facebook, and Microsoft, to authenticate users. The library provides a set of APIs and tools for handling common OAuth tasks, such as obtaining and refreshing access tokens, securely storing tokens, and handling token expiration.
React Native OAuth supports both Android and iOS platforms and can be easily integrated into a React Native app to handle authentication tasks.
React Native authentication exampleHere's an example of how to use the React Native App Auth library to implement OAuth 2.0 authentication in a React Native app.
First, install the React Native App Auth library:
npm i react-native-app-authImport the React Native App Auth module into your React Native app:
import { authorize, signOut } from 'react-native-app-auth';Add a function to handle the authorization flow:
const handleAuthorize = async () => { try { const result = await authorize({ issuer: '<a href="https://YOUR_ISSUER" rel="nofollow">https://YOUR_ISSUER</a>', clientId: 'YOUR_CLIENT_ID', redirectUrl: 'YOUR_REDIRECT_URI', scopes: ['openid', 'profile', 'email'], serviceConfiguration: { authorizationEndpoint: '<a href="https://YOUR_AUTHORIZATION_ENDPOINT" rel="nofollow">https://YOUR_AUTHORIZATION_ENDPOINT</a>', tokenEndpoint: '<a href="https://YOUR_TOKEN_ENDPOINT" rel="nofollow">https://YOUR_TOKEN_ENDPOINT</a>', }, }); console.Log(result); } catch (error) { console.Error(error); } };Add a function to handle sign-out:
const handleSignOut = async () => { try { await signOut(options); console.Log('User signed out'); } catch (error) { console.Error(error); } };Use the above functions in your React Native app to authorize and sign out users.
Protecting the data and privacy of end users is essential in today's business environment. Not only does it prevent costly breaches and damaged reputations, but it also improves the user experience and ultimately helps boost customer loyalty and satisfaction. Using React Native authentication to verify user identities is a relatively painless and straightforward process that sets organizations up with a strong layer of defense for their core users.
Aviad Mizrachi is CTO and co-founder at Frontegg.
—
New Tech Forum provides a venue to explore and discuss emerging enterprise technology in unprecedented depth and breadth. The selection is subjective, based on our pick of the technologies we believe to be important and of greatest interest to InfoWorld readers. InfoWorld does not accept marketing collateral for publication and reserves the right to edit all contributed content. Send all inquiries to newtechforum@infoworld.Com.
Discord Overhauls Its Android App So You Won't Have To Wait For New FeaturesThe Verge
TechDiscord overhauls its Android app so you won't have to wait for new featuresiOS users used to get features first, but not anymore
iOS users used to get features first, but not anymore
by Tom WarrenAug 1, 2022, 5:17 PM UTCLinkFacebookThreads
Illustration by Alex Castro / The Verge
Tom Warren is a senior editor and author of Notepad, who has been covering all things Microsoft, PC, and tech for over 20 years.Discord is overhauling its Android app in the coming weeks so that new features and updates arrive at the same time as iOS and desktop. If you're a Discord Android user, you're probably used to seeing new features not appear for months after they were announced on iOS, and we saw that most recently with the Server Profiles feature being available on iOS way before Android.
"Historically, work on the Android implementation of new features would often be delayed until desktop and iOS were completed, resulting in some features that launched first on one platform before eventually arriving on another one," explains the Discord product team in a blog post.
Discord is switching to React Native for its Android app, which will allow the company to roll out new features across every platform simultaneously. It also means that the design of Discord on Android will more closely resemble what you're used to seeing on desktop or even iOS.
React Native is widely used across many popular mobile apps, including Instagram, Microsoft Outlook, Shopify, Tesla, Pinterest, and many more. Discord has been using React Native for its iOS app since it was open sourced by Meta in 2015, allowing the company to build its iOS app from the core of its React app.
The move to React Native on Android will also make Discord features and design more consistent across Android, iOS, and desktop. While the Discord Android app will still keep some specific customizations, things like font sizes will be aligned between Android and iOS.
"Android users will also enjoy the benefits of faster app update release cycles," explains Discord. "React Native allows us to streamline and consolidate our processes, which helps our engineers work more efficiently and push out updates more frequently, especially now that the team won't be spending as much time maintaining different codebases for different devices."
Discord has already started rolling out its updated Android app, so Android users should start to feel the benefit of this underlying codebase change over the coming weeks. And hopefully, it should mean we'll never see another "coming soon to Android" message for future Discord features.
See More: AndroidAppleEntertainmentGamingGoogleiOSNewsPC GamingTechWebMost PopularMost PopularA weekly newsletter by David Pierce designed to tell you everything you need to download, watch, read, listen to, and explore that fits in The Verge's universe.
Email (required)Sign UpBy submitting your email, you agree to our Terms and Privacy Notice. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.Advertiser Content From
Comments
Post a Comment