I have a react native mobile app (ios/android), which I'm attempting to implement the PKCE Authorization Flow per the RFC. My aim is to redirect the user to my own login page instead of a third party provider like google or fb. This way I can avoid having to store the application secret on the client side. The flow is working great on the browser because I have a fully qualified domain name and the browser is able to follow the redirect sent by the authorization server directly to my login page.
However, on the mobile app I don't have a domain name and so the redirect_uri I send the authorization server is a schema url, e.g: my-app://someurl.com. I have created this schema url in xcode as well as the AndroidManifest.xml and verified that locally on the device it correctly routes to the app from either chrome or safari whether the app is in background or inactive. The problem is that the react native fetch method follows the 302 redirect sent by the authorization server (e.g. my-app://someurl.com locally) but it can't resolve it locally the way the browser does for example and throws a networking exception:
I printed out the stack on the native side and it's complaining about an 'unsupported url' given that it's the schema url and not a http/s formatted url:
Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSLocalizedDescription=unsupported URL, NSErrorFailingURLStringKey=my-app://someurl.com?client_id=client-id-LLg5PEvPwvyfVQNrNuDUgyHXWbSmUHki&authorization_code=ajxmtNSGUysXoj8qyU1xu9al9dMo9PFRZoFpCzsepGzrh7p9RKQyeT3qvjmoTcK, NSErrorFailingURLKey=my-app://someurl.com?client_id=client-id-LLg5PEvPwvyfVQNrNuDUgyHXWbSmUHki&authorization_code=ajxmtNSGUysXoj8qyU1xu9al9dMo9PFRZoFpCzsepGzrh7p9RKQyeT3qvjmoTcK, _NSURLErrorRelatedURLSessionTaskErrorKey=( "LocalDataTask <5271A124-F625-4583-9926-056D95F943B9>.<2>" ), _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <5271A124-F625-4583-9926-056D95F943B9>.<2>, NSUnderlyingError=0x600000d308a0 {Error Domain=kCFErrorDomainCFNetwork Code=-1002 "(null)"}}
The redirect: 'manual' fetch option would also solve this problem for me assuming it would also give me access to the redirect url I need to extract the token from but neither 'manual' nor 'error' work on react native (client side).
Curious to know if anybody has gotten this working on react native fetch with schema url's, perhaps I'm missing something obvious. The problem isn't so much the Deep Linking as that appears to be working, but more that I'm not sure how to handle this redirect in the app. Since the native side has received the redirect request externally but is choking on it when it attempts to follow it, is there a way for it to bypass the act of actually following it and instead just return the url result back to the react side?
Lastly, there are quite a few posts on here about similar issues but nothing that actually deals with this unique use case.
Thanks...
