https://www.ory.com/ logo
Join Slack
Powered by
Hi everyone, Has anyone successfully implemented ...
# ory-network
c
Hi everyone, Has anyone successfully implemented Social Sign in on a Native app? https://www.ory.sh/docs/kratos/social-signin/native-apps I am using Swift and Kotlin for the apps, have not yet tried on Kotlin, but on iOS I am running into some issues (I compiled the Swift SDK with openapi-generator since version 1.0.0 and it works fine). • So the first thing is, I am wondering what URL should I open on the ASWebAuthenticationSession. When I do create a native login flow, the result object is a flow with a request_url, should I use this one? Either way this functions fails if I add my return_to, explained in the next point. • I have also tried building it from scratch using URL Components. When I open this url from the browser it gives me an error that my return to url is not allowed. It is most likely the reason createNativeFlow fails. This error makes sense because it is not on my browser redirects in the console, which is a bummer since: • I cannot add my return_to url com.company.app://auth to the console as a browser redirect. This is needed to get back to the app on both iOS and Android. • Also, how should I request the refresh if I cannot send the session token as a query parameter. ASWebAuthenticationSession is ephemeral and it may only have the session cookie, if any. Thanks!
👀 1
Ok, so I was able to get it working. I was very confused on which URL to open on the app browser (custom tabs/ ASWebAuthenticationSession). Turns out I needed to call the updatelogin api first and then catch the error. Just as a recommendation, the documentation relies a lot on React Native (which is fine), and on the flow ui response automagically creating the view and ofuscating some API calls that we need to write manually on the native code. So my code looks something like this • The returnTo does not accept the format com.company.app://auth, so I have a separate web service https://redirect.app.company.com that takes the query parameters and 302 to com.company.app://auth • get login flow with createNativeLoginFlow(returnSessionTokenExchangeCode: true, returnTo: "https://redirect.app.company.com"), save flowID and sessionTokenExchangeCode • on provider click submit a Auth.updateLoginFlow(flow: flowID, updateLoginFlowBody: .typeUpdateLoginFlowWithOidcMethod(.init(method: "oidc", provider: "<provider>")), completion: {, in}) • catch the error 422 and the url in redirectBrowserTo • Open said redirectBrowserTo url on ASWebAuthenticationSession or CustomTabs and fetch the returnToCode from the query on done • call exchangeSessionToken with initCode (sessionTokenExchangeCode) and returnToCode
b
Hi! Thanks for the detailed write up, glad to hear that you made it work. The console validation on the redirect URL being too strict is a known issue and we are working on a fix. I suppose the documentation should be improved to not rely on React native too much, too. Contributions are welcome here 🙂
s
Thanks Andres, did you implement the android native part? In Android, to capture the link with the 
returnToCode
, you need to use App Links. That requires a public file on 
<domain>/.well-known/assetslinks.json
https://developer.android.com/training/app-links We had to wrap kratos on an nginx in order to serve this file (I'm not a web dev) @bland-eye-99092 I think this 
assetlinks.json
should be supported natively by kratos. Otherwise it's hard to capture a url on android, specially for localhost testing
@able-action-45419 perhaps this thread is of interest to you
✅ 1
a
@chilly-memory-85439 i’ve try to make the same thing on my app. I’m actually blocked on the step after use the Social login. The URL looks like
Copy code
<https://discord.com/oauth2/authorize?client_id=1045010489089994853&prompt=none&redirect_uri=https%3A%2F%><my-domaine>.live%2Fself-service%2Fmethods%2Foidc%2Fcallback%2Fdiscord&response_type=code&scope=identify+email&state=YWU4MWUwMjYtYWJmNy00YjJiLWFmMjYtNTJlNzA0NTIwMDQ1Ov-YwOJzIk8xkWFi2Eshnfg
But Kratos show an error that /<my-domain>/self-service/methods/oidc/callback/*discord* didn’t exist. How did you make it works for the redirect_uri please ?
b
Interesting, I didn’t know about the assetlinks file. Thanks for the guide. We can consider adding it, but we want to keep framework/platform specific things to a minimum, to reduce the maintanance overhead. Would you mind opening an issue about this in ory/kratos? @able-action-45419 the 
discord
part of the URL refers to the 
id
of the provider in your configuration. Did you perhaps name it something different there?
a
@bland-eye-99092 hi, if you talk about the 
redirect_uri
parameters, it’s exactly the same that i’ve configure here : https://ory-community.slack.com/archives/C012RJ2MQ1H/p1684133858965099
s
@bland-eye-99092 https://github.com/ory/sdk/issues/269 Please let me know if you need something else on that issue
c
Thanks @shy-fish-88756, in order to bypass that I used the schema just as in iOS, I already have a service running that is just a redirect, so basically the service is running at https://<subdomain>.<domain-used-in-ory>.com/authRedirect. When I request the Ory login I set the return to that service. The services takes the returnCode and responds with a 302 to the browser for com.company.app://auth?returnCode=<any>. This works both for iOS and Android as of now.
Hi @able-action-45419, I need a bit more context and it's been a while since I've done React Native, but I'm going to make some assumptions and try my best to help. First, for the return_to url, it looks like you need to enable DeepLinking on your app. There are two options, using web urls (https://), which is required if you are also compiling for the web, or using a custom scheme (com.company.app://) which works fine for an Android/iOS only app. Extrapolating on what @shy-fish-88756 mentioned, It appears that you would need an additional redirect service for both of them to point back to your app: • If using https://, as @shy-fish-88756 mentioned:
Copy code
In Android, to capture the link with the returnToCode, you need to use App Links. That requires a public file on <domain>/.well-known/assetslinks.json <https://developer.android.com/training/app-links>
• If using custom schema, you need the https:// service endpoint for the ory console and then redirect to your custom schema. After all of that is done, you mention that you are not receiving the 422. This code is received on the catch block of the Frontend.updateLoginFlow( params ), as showed on the onSubmit function here. The handleFormSubmitError function receives the errorResponse and handles it depending on the err.response.statusCode as showed here. There it is your choice of how you handle the url in err.response.data.redirect_browser_to, but I recomend using the example they use there, just note that the return URL used on the WebBrowser.openAuthSessionAsync (second param) must match exactly the return URL on the createNativeLoginFlow. Hope this helps. You can keep asking as you go through some of these points.
a
Hello @chilly-memory-85439 thank for your feedback. We already implement deeplink avec we have create a service that handle to return_to URL. Right now, the providers are displayed into the application, we can log in with provider and after that, the provider redirect to the service we create here : https://my.api/provider/callback that service is supposed receive the code right ? Like this : https://my.api/provider/callback?code=<my_code> and we add a function that can handle this URL and redirect to a scheme url like : my.app.com://auth/<the_code>. Can you tell me what did you do on your service here : https://redirect.app.company.com please ?
👀 1
c
I'm using serverless functions for this service, but it should be similar. "req" is the http request received by the Ory returnTo callback. The 302 is handled by the in-app browser (CustomTabs/ASAuthenticationService in my case).
Copy code
const redirect = async function (context: Context, req: HttpRequest): Promise<void> {
  var scheme = `<com.mycompany.app://auth>`;

  const returnURL = new URL(scheme);
  Object.entries(req.query).forEach(([key, value]) => {
    returnURL.searchParams.append(key, value);
  });

  context.res = { status: 302, headers: { location: returnURL.href }, body: null };
};
b
I think we should allow custom URI schemes here, and was actually under the impression that we do. Not sure what reasons there would be to not support them… I’ll see if I can clear that up.
a
hello @chilly-memory-85439 so this serverless function is host on your server ? it’s not a code that you add into your mobile app ?
c
Correct, it is hosted next to our APIs
@bland-eye-99092, that would be very helpful. The serverless function is only used to bypass that restriction.
b
Could you use app links instead of the custom URI schemes? We do recommend them in the docs, and the necessary JSON files could just be hosted on your servers as well. They don’t necessarily need to be hosted by Kratos, IIUC. https://developer.android.com/training/app-links or https://developer.apple.com/ios/universal-links/
c
I'll need to check, and do some testing. The callback works differently on Android and iOS: • On Android using CustomTabs, the redirect opens a new Activity, completely independent from the first login Activity, which does the processing of the callback. • On iOS using ASWebAuthenticationSession I can call ASWebAuthenticationSession(url: authURL, callbackURLScheme: scheme) { callbackURL, error in }, which means the same function that opens the browser is waiting for the redirect to the scheme specified in the callbackURLScheme to process the callback function (this is cleaner in my opinion). In my understanding, Universal-links would redirect to another View on my App and would need to cancel the Session and process the information elsewhere. I'll try to do some tests today and let you know.
s
On Android using CustomTabs, the redirect opens a new Activity
You can process the captured redirect_uri inside 
onNewIntent
on the same activity, just in case you didn't know that. It's what we are doing.
e
Hi @chilly-memory-85439 , I am working on a Flutter (Android iOS) Project and am looking how to implement the social login properly. Do you have any updates?
c
Hi @elegant-traffic-69008, Not really, we haven't changed the how the login is working since my last update as it is working fine for our use case and we have other priorities. We will revisit this in a future update though. I don't have experience with Flutter, but, if you need guidance, just let me know and I'll try to help as much as I can.
e
Thanx, I have been able to get it run as you mentioned, creating a proper redirect endpoint.
7 Views
Open in Slack
PreviousNext
Powered by