{"action":"created","issue":{"url":"https://api.github.com/repos/firebase/firebaseui-web/issues/47","repository_url":"https://api.github.com/repos/firebase/firebaseui-web","labels_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/47/labels{/name}","comments_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/47/comments","events_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/47/events","html_url":"https://github.com/firebase/firebaseui-web/issues/47","id":176200644,"number":47,"title":"how to integrate with react app?","user":{"login":"jasan-s","id":13863953,"avatar_url":"https://avatars0.githubusercontent.com/u/13863953?v=3","gravatar_id":"","url":"https://api.github.com/users/jasan-s","html_url":"https://github.com/jasan-s","followers_url":"https://api.github.com/users/jasan-s/followers","following_url":"https://api.github.com/users/jasan-s/following{/other_user}","gists_url":"https://api.github.com/users/jasan-s/gists{/gist_id}","starred_url":"https://api.github.com/users/jasan-s/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasan-s/subscriptions","organizations_url":"https://api.github.com/users/jasan-s/orgs","repos_url":"https://api.github.com/users/jasan-s/repos","events_url":"https://api.github.com/users/jasan-s/events{/privacy}","received_events_url":"https://api.github.com/users/jasan-s/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"channing-google","id":19961678,"avatar_url":"https://avatars0.githubusercontent.com/u/19961678?v=3","gravatar_id":"","url":"https://api.github.com/users/channing-google","html_url":"https://github.com/channing-google","followers_url":"https://api.github.com/users/channing-google/followers","following_url":"https://api.github.com/users/channing-google/following{/other_user}","gists_url":"https://api.github.com/users/channing-google/gists{/gist_id}","starred_url":"https://api.github.com/users/channing-google/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/channing-google/subscriptions","organizations_url":"https://api.github.com/users/channing-google/orgs","repos_url":"https://api.github.com/users/channing-google/repos","events_url":"https://api.github.com/users/channing-google/events{/privacy}","received_events_url":"https://api.github.com/users/channing-google/received_events","type":"User","site_admin":false},"assignees":[{"login":"channing-google","id":19961678,"avatar_url":"https://avatars0.githubusercontent.com/u/19961678?v=3","gravatar_id":"","url":"https://api.github.com/users/channing-google","html_url":"https://github.com/channing-google","followers_url":"https://api.github.com/users/channing-google/followers","following_url":"https://api.github.com/users/channing-google/following{/other_user}","gists_url":"https://api.github.com/users/channing-google/gists{/gist_id}","starred_url":"https://api.github.com/users/channing-google/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/channing-google/subscriptions","organizations_url":"https://api.github.com/users/channing-google/orgs","repos_url":"https://api.github.com/users/channing-google/repos","events_url":"https://api.github.com/users/channing-google/events{/privacy}","received_events_url":"https://api.github.com/users/channing-google/received_events","type":"User","site_admin":false}],"milestone":null,"comments":18,"created_at":"2016-09-10T20:21:14Z","updated_at":"2017-06-06T18:26:36Z","closed_at":null,"body":""},"comment":{"url":"https://api.github.com/repos/firebase/firebaseui-web/issues/comments/306575343","html_url":"https://github.com/firebase/firebaseui-web/issues/47#issuecomment-306575343","issue_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/47","id":306575343,"user":{"login":"formido","id":22295,"avatar_url":"https://avatars3.githubusercontent.com/u/22295?v=3","gravatar_id":"","url":"https://api.github.com/users/formido","html_url":"https://github.com/formido","followers_url":"https://api.github.com/users/formido/followers","following_url":"https://api.github.com/users/formido/following{/other_user}","gists_url":"https://api.github.com/users/formido/gists{/gist_id}","starred_url":"https://api.github.com/users/formido/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/formido/subscriptions","organizations_url":"https://api.github.com/users/formido/orgs","repos_url":"https://api.github.com/users/formido/repos","events_url":"https://api.github.com/users/formido/events{/privacy}","received_events_url":"https://api.github.com/users/formido/received_events","type":"User","site_admin":false},"created_at":"2017-06-06T18:26:36Z","updated_at":"2017-06-06T18:26:36Z","body":"I can log in with FirebaseUI Web Oauth, but I can't then update the database with the logged in user.\r\n\r\nIt works If my rules are set to:\r\n```\r\n{\r\n  \"rules\": {\r\n    \".read\": \"auth != null\",\r\n    \"44358340\": { \".write\": true }\r\n  }\r\n}\r\n```\r\nMy `onAuthStateChanged` handler sees the user and prints `Timestamp written` to the Chrome console.\r\n\r\nBut if my rules are set to require authorization:\r\n```\r\n{\r\n  \"rules\": {\r\n    \".read\": \"auth != null\",\r\n    \"44358340\": { \".write\": \"auth != null\" }\r\n  }\r\n}\r\n```\r\nMy `onAuthStateChanged` handlers sees the user but fails to update the Firebase database and records an error in the Chrome console:\r\n```\r\ndatabase.js:52 FIREBASE WARNING: set at /44358340 failed: permission_denied`\r\ndatabase.js:220 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied\r\n    at database.js:220\r\n    at fc (database.js:59)\r\n    at Ah (database.js:220)\r\n    at database.js:215\r\n    at database.js:177\r\n    at Ag.g.wd (database.js:178)\r\n    at og.wd (database.js:168)\r\n    at Yf.Xf (database.js:166)\r\n    at ag (database.js:150)\r\n    at WebSocket.Ia.onmessage (database.js:149)\r\n```\r\nThis is just a simple `create-react-app` along with `npm install firebaseui --save`. After that, the only file I changed is `src/App.js` using @channing-google's code above as guidance.\r\n\r\n```javascript\r\nimport React, { Component } from 'react';\r\nimport logo from './logo.svg';\r\nimport './App.css';\r\nimport firebase from 'firebase';\r\nimport firebaseui from 'firebaseui';\r\nimport 'firebaseui/dist/firebaseui.css';\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      <div className=\"App\">\r\n        <div className=\"App-header\">\r\n          <img src={logo} className=\"App-logo\" alt=\"logo\" />\r\n          <h2>Welcome to React</h2>\r\n        </div>\r\n        <p className=\"App-intro\">\r\n          To get started, edit <code>src/App.js</code> and save to reload.\r\n        </p>\r\n        <FirebaseUI />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nvar config = {\r\n  apiKey: \"AIzaSyCykvoa0gMrHjWp_b9pgJG6PsdJJVN3VHU\",\r\n  authDomain: \"in-out-board-a9ed9.firebaseapp.com\",\r\n  databaseURL: \"https://in-out-board-a9ed9.firebaseio.com\",\r\n  storageBucket: \"in-out-board-a9ed9.appspot.com\",\r\n};\r\nvar app = firebase.initializeApp(config);\r\nvar authUi = new firebaseui.auth.AuthUI(firebase.auth());\r\nvar ref = firebase.database().ref(\"/44358340\");\r\n\r\nfirebase.auth().onAuthStateChanged((user) => {\r\n  if (user) {\r\n    ref.set(firebase.database.ServerValue.TIMESTAMP).then((error) => {\r\n      if (error) {\r\n        console.error(error);\r\n      }\r\n      else {\r\n        console.log(\"Timestamp written\");\r\n      }\r\n    });\r\n  }\r\n});\r\n\r\nclass FirebaseUI extends Component {\r\n  componentDidMount() {\r\n    var self = this;\r\n    var uiConfig = {\r\n      'callbacks': {\r\n        'signInSuccess': function(user) {\r\n          if (self.props.onSignIn) {\r\n            self.props.onSignIn(user);\r\n          }\r\n          return false;\r\n        }\r\n      },\r\n      'signInOptions': [\r\n        firebase.auth.GoogleAuthProvider.PROVIDER_ID,\r\n        firebase.auth.EmailAuthProvider.PROVIDER_ID\r\n      ]\r\n    };\r\n    authUi.start('#firebaseui-auth', uiConfig);\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    authUi.reset();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div id=\"firebaseui-auth\"></div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;\r\n```\r\nI asked a [less detailed question on the same problem at Stack Overflow](https://stackoverflow.com/questions/44358340/firebase-authenticated-user-with-full-permissions-gets-permission-denied-on-roo) to which @puf made a helpful comment, but I think my problem description wasn't self-contained enough and the question has gone stale without a resolution.\r\n\r\nI also forked @ryansully's ryansully/react-firebaseui-web-demo to make fully runnable example.\r\n\r\nClearly I'm missing something very basic, but this is my first time using React and Firebase. They're such a perfect fit for our use case so I don't want to give up on them!"}}
{"actor":{"display_login":"formido"}}