How to implement Google SSO with Memberstack in a mobile app without tab redirects?

Juan Andrés Baz asked April 30, 2024 22:15

Answered

Hi Tyler Bell

We are trying to add Google SSO to our mobile application using memberstack, but looks like it send the user data to the opener tab here https://client.memberstack.com/auth/callback?state=

using this script
https://client.memberstack.com/auth/callback?state=

const error = JSON.parse('{"message":"Something went wrong. Please try again."}');
if (error) {
window.opener.postMessage({ error }, "*");
} else {
const data = JSON.parse(unescape('[object Object]'))
window.opener.postMessage({ data }, "*");
}
window.close();

Is there any chances to don’t open a new tab and send the data to a parent mobile application?

For example:
window.ReactNativeWebView.postMessage for React Native, and
window.webkit.messageHandlers.cordova_iab.postMessage for Cordova

Thanks in advance

1 comment

Juan Andrés Baz OP April 30, 2024 22:17
I resolved this by making modifications to the memberstack/dom lib
- We got the memberstack url that is using to open the sso tab https://client.memberstack.com/auth-provider/login?provider=google with our params
- We opened an in-app browser using the URL from the step 1
- Create a listener onMessage (React Native) or loadstop (Capacitor + cordova) to check the url redirects
- If the url redirects is https://client.memberstack.com/auth/callback?state= then Google SSO is done and the user is redirected to the callback
- Inject a javascript to the in-app browser to get the https://client.memberstack.com/auth/callback?state= html and send it to the app parent
- Capacitor: "window.webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({message: window.document.documentElement.innerHTML}));"
- ReactNative: 'window.ReactNativeWebView.postMessage(JSON.stringify(window.document.documentElement.innerHTML))'
- Create a browser listener to get that message and parse the html to get the success (token) or error (error message)
Success:
```
const getSuccessMessage = (message) => { try { const regex = new RegExp(/unescape\('([^']+)'\)/); if (regex.test(message)) { const match = regex.exec(message); const extractedString = match[1]; const encodedString = extractedString .replace('"unescape(', "") .replace('"', ""); const unscapeString = unescape(encodedString); const parsedString = JSON.parse(unscapeString); return parsedString; } } catch (error) { return null; } };
```
Error:
```
const getErrorMessage = (message) => { try { const regex = new RegExp(/"message":"([^"]*)"/); if (regex.test(message)) { const match = regex.exec(message); const extractedString = match[1]; return extractedString; } } catch (error) { return null; } };
```
- If it was success we save the token in the cookie or localstorage, and if it was an error we show it to the user
That's all, hope this helps
0

Please sign in to leave a comment.