I just want to start with I have little to no experience with React or React Native so there are likely things I am doing which could be improved, but I wanted to learn and have to start somewhere.
I decided to begin with getting an OAuth workflow within React Native. I’m going to run through this from a Mac OSX user perspective, and for a target of iOS.
Where better to get started than following the Getting Started guide, I initially followed the Expo flow as this was the one which is shown by default. But I soon learned that with OAuth you need to install some native dependencies for the Auth flow.
To create the app initially it’s fairly straight forward, install the cli
npm install -g react-native-cli and then create your project
react-native init MyAwesomeAuthApp.
For the Auth, I am going to use the React Native App Auth package, which allows OAuth 2.0 and OpenID Connect providers.
Install and link the native package via the following:
npm i react-native-app-auth
react-native link react-native-app-auth
link part is what adds the native dependencies to the
andriod builds. I opted to use the Carthage step to add the dependencies as I had some issues with the Cocoa pods not working correctly to install the dependency. Start by navigate into the
iOS folder and create a
Cartfile with the following contents:
github “openid/AppAuth-iOS” “master”
You will need to have
carthage installed which you can do with
brew install carthage. Once you have installed and created the
Cartfile you can run
carthage update — platform iOS to install the packages.
Once this has completed you will need to copy the
AppAuth.framework which is located in
ios/Carthage/Build/iOS and add that to
Frameworks within Xcode. Finally setup a
Copy Files phase within the
Build Phases, pick
Frameworks as the destination and add
AppAuth.framework and be sure to check the
Code Sign on Copy option.
We are going to need to open the
ios project in
Xcode now to finish the setup. From within the
ios folder if you run
open MyAuthApp.xcodeproj this should open
Once the project is open, expand the folder which says the project name in my case
MyAuthApp you should see a file called
AppDelegate.h you can replace it’s contents with the following:
This sets up the
AuthorisationFlowManager, and you will need to update the
AppDelegate.m also to allow the openUrl method to feed the authorisation into the app. Before the call to the
@end of the
AppDelegate.m file add this:
This completes the Auth setup and installation, you should now be able to run
react-native run-ios and see a running application within a simulator. This may take a while and will confirm that the setup is complete if all goes well. We haven’t added any auth to the actual React app yet, so this is just to clarify that everything worked.
We have installed the package and set it all up, now we need to add Auth to the React app. We are going to keep this simple for now and just going to add a button which will run the authentication.
In the above snippet, I’ve updated the generated
App.js file which
react-native creates by default. I’ve removed some of the initial text and added a login button. I’ve imported the auth package and created an
_authorize method which will open the chosen auth providers login page.
For the example above I have chosen Google. You will need to set up the OAuth credentials and add them to the
redirectUrl once you have done this you should be able to reload the app and press the
login button to be taken to the Google login screen! Yeah!!
Thanks for reading. I’m no React expert so if you have anything I’ve done wrong or could be improved I’d appreciate any comments or messages!