Correcting the example to make it work #1000
Conversation
The example was not working, as one needs to move the code to the body, and is not clear to newbies where the initialisation of firebase should go.
|
Hi @NhienLam, could you please review? Thanks |
|
Thanks @manuelsh for the PR! In the code snippet, we have a comment telling developers to initialize the firebase app in the The initialization snippet includes |
|
Thanks for looking to the PR! If I follow the code in the readme file, and add the
That's why I suggested the changes in the PR. This is the code that didn't work. Maybe there is something else I did wrong, but couldn't spot it. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sample FirebaseUI App</title>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
</script>
<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link
type="text/css"
rel="stylesheet"
href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css"
/>
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
signInSuccessUrl: "<url-to-redirect-to-on-success>",
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
],
// tosUrl and privacyPolicyUrl accept either url string or a callback
// function.
// Terms of service url/callback.
tosUrl: "<your-tos-url>",
// Privacy policy url/callback.
privacyPolicyUrl: function () {
window.location.assign("<your-privacy-policy-url>");
},
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start("#firebaseui-auth-container", uiConfig);
</script>
</head>
<body>
<!-- The surrounding HTML is left untouched by FirebaseUI.
Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
</body>
</html> |
|
Hi Manuel! If I understand correctly, the README file is written to be consistent with our demo application which uses NPM instead of CDN. |
|
Oh what you mean is when in the readme file it says: we should add the NPm version and not the CDN... that makes sense. How about making it more explicit, to avoid these issues? For example: |
|
closed it by mistake, apologies |
The example was not working, as one needs to move the code to the body, and is not clear to newbies where the initialisation of firebase should go.