Before I ask my question I know how to register url schema. This suggests the same. But this holds true if we have a custom url schema. What if we have to open a url with https schema. Not all https links. Ones only of my application. e.g. https://www.myurl.com or https://www.myurl.com/groups. I want that wherever I find these link on iPhone (email, SMS, Safari), my app should be opened.
You cannot control the https/https schema to redirect to an app as they are registered with browser.
So once User click on any http link it will launch the browser.
Approach that is widely used is to redirect from the browser to the app if it is installed.
You should redirect to the register url schema on your https url, and you can check the browser who is using the url by js, than match the redirect, like this:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if ( isMobile.Android() ) {
document.location.href = "y";
}
else if(isMobile.iOS())
{
document.location.href="x";
}
And this link should help you also.
Related
I am switching from Flutter to Supabase and am running into an issue with Authentication. Although I can successfully launch the URL with the correct redirect value, I keep getting redirected to the site URL which should only be used for web, not iOS or Android. Below is the function I am using for Apple but this is happening with all other providers as well.
const isWeb = Platform.OS === "web";
const redirectTo = isWeb
? "https://web.example.com/login-callback/"
: "com.example.react://login-callback/";
export const signInWithApple = async () => {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: "apple",
options: {
redirectTo: redirectTo,
},
});
if (error !== null) {
console.log(error?.message);
return "error";
} else {
console.log(data);
Linking.openURL(data.url);
return "success";
}
};
The URL that gets logged before launching is correct, for example, LOG {"provider": "apple", "url": "https://api.example.com/auth/v1/authorize?provider=apple&redirect_to=com.example.react%3A%2F%2Flogin-callback%2F"}, but I always get redirected to something like https://web.example.com/#access_token=*****. I had a similar issue with Flutter, and that was because I had not added the additional redirect in Supabase but I already did that. I also confirmed that I have CFBundleURLSchemes set in the info.plist for iOS but that did not fix it.
IF SELF-HOSTING:
Check that you do not have spaces after commas in ADDITIONAL_REDIRECT_URLS.
Correct ✅ :
ADDITIONAL_REDIRECT_URLS="URL,URL,URL"
Incorrect ❌ :
ADDITIONAL_REDIRECT_URLS="URL, URL, URL"
I am trying to implement SSO in a mobile app.
I am using react-native-inappbrowser-reborn to handle the SSO auth flow in an in-app browser. I can successfully authenticate inside the in-app browser. That is to say, I receive a session cookie and I can view the web version of the app from inside of the in-app browser. However, when I redirect back to the mobile application, none of my fetch requests include the session cookie! I have fetch configured with {credentials: 'include'}. CookieManager.getAll() returns an empty object.
I am experiencing this problem on iOS (v15.2), and I have yet to test on Android.
According to the documentation I should be able to share the cookie set in the in the in-app browser with my react-native app.
I am using the following code based off of the react-native-inappbrowser-reborn documentation
async function authenticate() {
const url = 'http://localhost:3000/sso/login?redirect_uri=myapp://home';
const deepLink = 'myapp://home';
try {
if (await InAppBrowser.isAvailable()) {
InAppBrowser.openAuth(url, deepLink, {
// iOS Properties
ephemeralWebSession: false,
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: false,
}).then(async (response) => {
if (response.type === 'success' && response.url) {
console.log('should see a new cookie set!');
console.log(await CookieManager.getAll()); // Sadly, nothing in here
const user = await fetch('http://localhost:3000/user', {
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
/* This is an authenticated endpoint which returns a 401,
because for some reason the session cookie doesn't go along with the request */
}
});
} else {
throw new Error('login unsuccessful');
}
} catch (error) {
throw new Error();
}
}
Any bit of insight here would be immensely appreciated!
The user story:
On a browser, I have my Progressive Web App opened on any URL
https://mypwa.com/xxxx
I receive a mail, with a link to a page of my PWA
https://mypwa.com/post/<postId>
Instead of opening a new tab in the browser, I want my existing PWA tab to get the focus and go on the URL. I don't want a new tab nor a new PWA startup (it costs a lot in records download)
With postMessage, Service Worker can tell existing tab to get focus and go on the /post/<postId> path. Supposed to work but I get a "DOM Exception" on client.focus() in the service worker, from a fetch event, in short:
self.addEventListener("fetch", function(event) {
var requestUrl = new URL(event.request.url);
var pathname = requestUrl.pathname;
if (
event.request.mode === "navigate" &&
requestUrl.origin === location.origin
) {
const rootUrl = new URL("/", location).href;
const mg = pathname.match(regexpPost);
const postId = mg[1];
event.waitUntil(
clients.matchAll().then(matchedClients => {
for (let client of matchedClients) {
if (client.url.indexOf(rootUrl) >= 0) {
return client
.focus() // ***** CRASHING HERE *****
.then(() => {
return sendMessageClient(client, { postId }).then(resp => {
other;
});
});
}
}
})
);
}
});
What I'm missing also is how to close the newly opened tab. I don't want to keep it: dead tabs can accumulate and this is not a good user experience.
Tried javascript window.close(); but it has to respond to a user action...
Since yesterday when I use the gapi.auth2 to do a Google Sign-in on an installed PWA app on Android, the App opens the browser window to select the user, but it remains blank.
The same page on the Chrome browser on Android open the user selection as usual. The code is the same, from the same server. The code was not modified in more than 15 days. I presume the problem is some change in the gapi JS client code from Google servers.
Inspecting the PWA Google Sign-in tab on chrome shows the following error:
Uncaught Failed to get parent origin from URL hash!
The origins on Google Developer Console are ok.
Anyone has any clue how to solve this?
Edit1: Code chunk
initGoogle() {
this.ngRedux.dispatch({ type: SN_INIT_GOOGLE });
Observable.create((observer: Observer<any>) => {
let head = document.getElementsByTagName('head');
(<any>window).__ongload = () => {
gapi.load('auth2', () => {
gapi.auth2.init({
client_id: `${AppConfig.google.clientID}`
}).then(() => {
this.auth2 = gapi.auth2.getAuthInstance();
this.googleInitiated();
observer.complete();
}, (err) => {
this.log.error(err);
observer.error(err);
});
});
};
let script: HTMLScriptElement = document.createElement('script');
script.src = 'https://apis.google.com/js/platform.js?onload=__ongload';
script.type = 'text/javascript';
head[ 0 ].appendChild(script);
}).pipe(
timeout(AppConfig.google.timeout),
retry(AppConfig.google.retries),
catchError(error => {
this.googleInitError();
return observableEmpty();
}),
take(1)
).subscribe();
}
async googleLogin(scope: string = 'profile email', rerequest: boolean = false, type: string = SN_GOOGLE_LOGIN): Promise<GoogleUser> {
let goopts = {
scope: this.ngRedux.getState().socialNetworks.getIn([ 'google', 'grantedScopes' ]),
prompt: rerequest ? 'consent' : undefined
};
try {
const user: GoogleUser = await this.auth2.signIn(<any>goopts);
...
return user;
} catch (error) {
...
return error;
}
}
Edit 2: Error screenshot
Screenshot
I had the similar issue as mentioned here. I had not registered my domain under Credential -> My OAuth Client ID -> Authorized JavaScript origins. By adding, it started working. Check the similar case for your app. It may help.
This bug should be fixed. Cannot reproduce it any more.
I have FB.init function to share on facebook. I am able to redirect to given redirect url through other browsers. But the same thing is not working on facebook app. It redirects me to the home url.
My function is defined as,
FB.ui({
method: 'share',
display: 'iframe',
href: "http://XX.XX.XXX.XXX:XXXX/vacation_builders/" + vb_id,
picture: imageurl,
description: blog_description,
title: blog_title
},
function(response) {
console.log(response);
if (response && !response.error_message) {
console.log(response.status);
window.location = '/congrats'
}
else if (response && !response.error_message == "User canceled the Dialog flow") {
self.location.href = '/congrats'
}
else if (response && !response.error_message == "User+canceled+the+Dialog+flow") {
self.location.href = '/congrats'
}
});
After i'm done sharing this image with url :- http://XX.XX.XXX.XXX:XXXX/vacation_builders/" + vb_id.
when I go to facebook and click on the image then everything works fine whether I click from facebook logged in from mobile browser or desktop browsers but when i go to facebook app and clicks on the link then it takes me to http://XX.XX.XXX.XXX:XXXX instead of http://XX.XX.XXX.XXX:XXXX/vacation_builders/" + vb_id.