Why use redirect URLs in a mobile app?
I recently started a web project. Our team decided to implement Oauth2.0 with an authorization code grant for user authentication. (If you are not familiar with Oauth2.0 or grant type, you want to refer here.)
As I have implemented Oauth2.0 several times before, I thought there wouldn't be any issues. But an issue with handling redirect URLs was raised by the front-end team.
My prior projects are web applications, but it is a native app using react native this time. How can a mobile app handle redirect URLs to send grant code to back end server?
This is what I searched for my front-end team members.
How can mobile applications handle redirect URLs?
There are three methods native apps can handle redirect URLs.
- HTTP URL
- Custom URL Scheme
- Loopback URL
1. HTTP URL
This is to register the familiar HTTP URL like my-app.com to platforms. Once the URL is registered on IOS and Android, the app will be launched immediately when the URL is opened in the system browser. Have you seen a URL that opens a mobile app on a specific page? That links are called deep links and HTTP URL is the common way to deep link into a mobile app. Available for both IOS and Android and the most recommended method.
The advantage is that this is more secure than other methods as it could use HTTPS. And HTTP URLs are the most common URL, so it provides the most integrity.
The disadvantage is that you need to register this URL separately for ios and android. And it is relatively cumbersome compared to other methods as additional procedures are required to prove that you have the domain.
Link on how to register HTTP URLs for each platform
2. Custom URL Scheme
This is to register a custom URL scheme. A custom URL scheme is a special type of URL like my-app://redirect.google, not the usual URL that starts with HTTPS as we are familiar with. Like an HTTP URL, you can make the system launch the app when the URL is opened in the system browser.
Good thing is that registration is simple compared to HTTP URL. If you are using react-native with expo, a custom URL scheme that can be used in the development process is given by default. Also, when deploying the actual app, you can just add the scheme property in app.json.
How to configure a custom URL scheme in expo
The downside is that there is no global registry of custom URL schemes to avoid conflicts between developers. Therefore, it is important to use a domain that you own so that you can use a unique URL. Another disadvantage is that redirect URL must be registered in authorization servers for Oauth, but the cutsom URL scheme is not valid for security reasons in some organizations.
3. Loopback URL
This is a way to open an HTTP server in the app and handle the redirect URL with a random port. It is mainly supported by desktop operating systems and not supported by mobile operating systems. Also, when using OAuth, you need to register the redirect URL in the authorization server. But if you register the loopback URLs as redirect URLs, if the client key for OAuth is exposed, it is not possible to filter unauthorized requests with the redirect URL, so it is not secure.
What did we choose?
We don't have a domain yet, and we're focusing on making an MVP asap, so we've left out option #1. Also, the OAuth providers that we want to use do not support custom URL schemes, so we could not use the second option. They encouraged us to use their SDK for native apps. Therefore, this time, we decided to retrieve user information through Oauth from the front-end and authenticate the user based on email in the back-end.