Flutter - Firebase - Twitter Authentication issue - firebase

I am Trying to Authenticate twitter using flutter and firebase. but not able to landing back on my application page after Authorizing on twitter.
Images:
001
001 : launch app login button will redirect to Twitter page(image 002)
002from twitter page when I click on Authorize app it switches to Image 003 "social_demo" which is app label in my androidmenifest.xml.
003then I click back and it redirect to twitter page with error message Image 004.
004finally if I close this or click back, I got debug message in app "TwitterLoginStatus.cancelledByUser".
Steps are:
redirect to twitter from app
Future signInWithTwitter() async {
final twitterLogin = TwitterLogin(
apiKey: "xxxxxxxxxx",
apiSecretKey: "xxxxxxxxx",
redirectURI: 'flutter-twitter-auth://',
);
await twitterLogin.login().then((value) {
debugPrint(value.status.toString());
});
message => TwitterLoginStatus.cancelledByUser
Androidmenifest.xml
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="flutter-twitter-auth"/>
</intent-filter>
pubspec.yaml
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.4
firebase_auth: ^3.2.0
google_sign_in: ^5.2.1
google_fonts: ^2.1.0
flutter_facebook_auth: ^3.5.6
twitter_login: ^4.0.1
looking for solution... if anyone come across to this.
Twitter: Twitter

I was facing the same problem, (Went through twitter_login: ^4.0.1 documentation) found the culprits.
<data android:scheme="flutter-twitter-auth"/>
Replace the above with,
<data android:scheme="your_app_name"/>
also replace the below snippet
final twitterLogin = TwitterLogin(
apiKey: "xxxxxxxxxx",
apiSecretKey: "xxxxxxxxx",
redirectURI: 'flutter-twitter-auth://',
);
with
final twitterLogin = TwitterLogin(
apiKey: "xxxxxxxxxx",
apiSecretKey: "xxxxxxxxx",
redirectURI: 'your_app_name://',
);
and finally callback URL in twitter developer account should be,
your_app_name://

Related

Dynamic link opening Play Store instead of Installed app

Dynamic link is not opening the installed mobile app. It opens the Play Store instead. I have a button on my website on click of which, I want to open my app. For this, I am opening a dynamic link on click of that button on my website. When I click on the button, in some web browsers, the dynamic link is redirecting to Google Play store app(with my app on the Play Store) and in some browsers, opening Play Store website(with my app on the Play Store) inside the browser. However, when I send that dynamic link in the chat apps like Whatsapp and click on that link from the chat, then its opening my installed application.
I have also uploaded the release and debug SHA-256 keys from my local machine and the Google Play Store on the Firebase Console.
I have gone through several Github issues and stackoverflow questions, but could not find any solution for it.
Mobile
On mobile side, I have dynamic link listeners setup. We are generating the dynamic link on the backend side(code included below).
useEffect(() => {
getInitialDynamicLink();
const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
return () => unsubscribe();
}, []);
const handleDynamicLink = link => {
if (link?.url) {
console.log('shared url is: ', link?.url);
}
};
const getInitialDynamicLink = () => {
dynamicLinks()
.getInitialLink()
.then(link => {
handleDynamicLink(link);
});
};
Backend
On the backend, I am using https://www.npmjs.com/package/firebase-dynamic-links/v/1.0.0 to generate dynamic links.
package.json:
"#react-native-firebase/app": "^16.4.0",
"#react-native-firebase/dynamic-links": "^16.4.0",
"react-native": "0.67.4",
android/build.gradle
ext {
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
ndkVersion = "21.4.7075529"
kotlin_version = "1.4.0"
googlePlayServicesAuthVersion = "19.2.0"
}
AndroidManifest.xml:
As mentioned in the doc https://developer.android.com/training/app-links#android-app-links, my app also has the App Link
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:host="appname.page.link" android:scheme="https"/>
</intent-filter>

Firebase doesn't work on flutter web but fine on android emulator

I tried to use firebase auth on the app, it runs fine on android emu and able to create account and login but not on web(chrome). When I run the debug it gave an error of TypeError: Cannot read properties of undefined (reading 'app'). But if I run flutter build web --release and open the web link it returns
ReferenceError: firebase is not defined. I have been google-ing for days, still unable to fix this issue. I'm at the dead-end not sure what to do. the const firebaseConfig = {...}; in the index.html was given from firebase auth when created an webapp project.
Please help. not sure where it went wrong.
flutter doctor
[√] Flutter (Channel stable, 2.5.0, on Microsoft Windows [Version 10.0.22454.1000],locale
en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.60.2)
[√] Connected device (2 available)
flutter --version
Flutter 2.5.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 4cc385b4b8 (2 weeks ago) • 2021-09-07 23:01:49 -0700
Engine • revision f0826da7ef
Tools • Dart 2.14.0
in the pupspec.yaml
name: login_test
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
cupertino_icons: ^1.0.2
firebase_auth: ^3.1.1
firebase_core: ^1.6.0
flutter:
sdk: flutter
fluttertoast: ^8.0.8
form_field_validator: ^1.1.0
dev_dependencies:
flutter_lints: ^1.0.0
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
in the web/index.html
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="login_test">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>login_test</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- Firebase Configuration -->
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { auth } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js"
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "_________-_________",
authDomain: "_________-_________.firebaseapp.com",
projectId: "_________-_________",
storageBucket: "_________-_________.appspot.com",
messagingSenderId: "_________",
appId: "1:_________:web:_________"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
</script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing || reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I think that I got what's happening. The problem is to integrate Flutter compiled to web with Firebase web api.
The FlutterFire (it is the Flutter library to integrate with Firebase) was developed to integrate with the Firebase web api version 8.6.1.
On the other hand, Firebase web api is already in version 9.x, and it has different method calls on initialization. So, the solution is to use Flutter web api 8.6.1 instead of 9.x like de Flutter web api documentation.
The confusion comes from when a beginner create a new Firebase app at the console and the page gives a code to put on the flutter web index.html, but in this case the code use Firebase web api 9.x version style.
TL;DR;
The code in the Flutter web/index.html needs to be exactly like this. Put in the beginning of the body tag. Just replace your firebaseConfig object.
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script>
var firebaseConfig = {
apiKey: "----",
authDomain: "----",
projectId: "----",
storageBucket: "----",
messagingSenderId: "----",
appId: "----"
};
firebase.initializeApp(firebaseConfig);
</script>
Use this libraries but replace the version to 8.6.1.
You should really follow the official docs. If you follow it from the start carefully it will take you there. You'll occasionally see web-specific stuff like this:
https://firebase.flutter.dev/docs/installation/web
https://firebase.flutter.dev/docs/firestore/overview#3-web-only-add-the-sdk
We use it in Flutter Web just fine using these instructions. Your index.html looks different from what's there in the docs. You probably followed a tutorial somewhere that is probably outdated now.

Stop Firebase Dynamic Links from redirecting to browser when opened from within app

We want a user to complete their profile, so an in-app message pops up and if they accept, it redirects them to the edit profile page. It's working, but it redirects to the browser, comes back the app, and then completes the navigation to the profile page. Is there a way to cut out the browser redirect?
I tried setting the intent-filter in the AndroidManifest.xml
<intent-filter>
<data android:host="#string/firebaseDynamicLinkDomain" android:scheme="http"/>
<data android:host="#string/firebaseDynamicLinkDomain" android:scheme="https"/>
</intent-filter>
Here's where we initialize
export const initialize = async () => {
try {
disposeOnLink = dynamicLinks().onLink(handleLink);
} catch (e) {
throw e;
}
};
and then handle the link
const handleLink = (link: string) => {
if (link.url === 'https://mykomae.page.link/edit-profile') {
navigateToEditProfile('profile');
}
};
So it's functional but it looks awful and I'm hoping to avoid this behavior.
This has been a while since you posted but I think you might be missing an intent filter. Just replace example.com with your domain and it should work.
https://firebase.google.com/docs/dynamic-links/android/receive#add-an-intent-filter-for-deep-links
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data
android:host="example.com"
android:scheme="https"/>
</intent-filter>

Submitting data from contentscript input to firebase

I am making a chrome extension with a custom popup that comes up after the page is loaded.
I would like to safe the submitted answers from the input-field to my firebase database, so that i cant include them in another website. It all works, but the problem is, that the answers from the extension get blocked:
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/plain. See for more details.
How can i solve this Problem?
Note: I am not a pro at this, so i'd really appreciate an easy to follow solution:)
these are my steps:
I downloaded the firebase.js and added it to my manifest.json:
"matches": ["<all_urls>"],
"js": [ "Libraries/firebase-app.js",
"Libraries/firebase-firestore.js",
"sketch.js"],
I injected the html to the webpage using the content-script:
<div id="bg-modal">
<div class="modal-content">
<button class="close">+</button>
<div class="text"></div>
<form class="antwortfeld antwortfeld1" action="">
<textarea type="text" name="antwort" placeholder="Antworten"></textarea>
<button class="Senden">Senden</button>
</form>
I added the firebase app configuration and initialized firebase in the content-script
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "...TRZeHhLQ9gMa4V4gy9WSlQ",
authDomain: "....firebaseapp.com",
databaseURL: "https://....firebaseio.com",
projectId: "....",
storageBucket: "....appspot.com",
messagingSenderId: "...0021",
appId: "1:385077100021:.....ba5a776b4bc"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
then i added this to the content-script as well to save the inputdata to firebase:
const form1 = document.querySelector('.antwortfeld1');
// saving data
form1.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('Antworten').add({
Antwort1: form1.antwort.value,
})
form1.antwort.value = ' ';
})
As I said, it's all working, but I get blocked. I guess I'll have to use a background-script to get around this? What would that look like?
Any other options?

Ionic App: Firebase Authenticate with using OAuth Provider shows AUTH_DOMAIN instead of Custom Domain

I implemented a Login with Google API following the Firebase Authentication docs (Authenticate Using OAuth Providers with Cordova) Link. However, it shows the Project Default AUTH_DOMAIN. How do I change it to show custom URL?
<universal-links>
<host name="example.page.link" scheme="https" />
<host name="example-app.firebaseapp.com" scheme="https">
<path url="/__/auth/callback"/>
</host>
</universal-links>
Have you set your domain when adding Firebase to your app?
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
Also, using your own domain is not as easy as it sounds. Check out this post for more info.

Resources