I am following a tutorial for Vue that uses the following code:
let app
auth.onAuthStateChanged(() => {
if (!app) {
app = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}
})
This is supposed to make sure that Firebase loads the authState before mounting the app, if a user reloads the page.
However, I am using Vue 3 and the thus I can't initialize via new Vue() anymore, as you have to use createApp now.
I'm initializing & mounting my app the following way:
createApp(App).use(store).use(router).mount('#app')
Unfortunately, I am lost on how I can make sure that the DB still initializes the same way, and I was unable to find a proper solution (spent the last hour on google & SO).
Any help is highly appreciated, maybe I am just missing a simple concept for promises or something similar.
Thank you very much, stay healthy!
The Vue 3's createApp is same as Vue 2's new Vue(), returning Vue app instance:
let app;
auth.onAuthStateChanged(() => {
if (!app) {
app = createApp(App).use(store).use(router).mount('#app')
}
})
Related
Attempting to let Firebase persist authentication within the app.js of React Native by doing the following:
There is a sign in page that envokes auth() sign in via Firebase, which works fine, and redirects to the home page via navigation.replace("Home"); however, once the app is closed and relaunched on the emulator, it redirects back to sign in.
This is seemingly what the App.js looks like, I assume that the AuthStateChanged would be prevalent as depicted below, however, user is not accessed in App.js as it is established in SignIn.js, when the Firebase credentials are sent, but I assume it would be similar to this layout?
const App = () => {
var initialRoute = null
React.useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
if(user) {
initialRoute = "Home"
}
else {
initialRoute = "SignIn"
}
})
return unsubscribe
}, []);
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={initialRoute}
>
The reason it needs to affect the initial route, and not just redirect anyone who reopens to the home page, is because after registration, there are extra steps included that adjust the database, such as location mapping and etc., therefore, the redirection has to occur within the initial route.
Thanks for your assistance.
This is not how you build a navigation flow with react-navigation. But that's no problem since theres a guide here on the official react-navigation side on how to do that: https://reactnavigation.org/docs/auth-flow/
Fixed by setting two different returns within App.js, one for if the user is authenticated with Firebase that sets the initialRoute to "Home", and one for else that sets it to "SignUp", seems to work fine.
I'm totally new with next.js and I need your help for something I guess really basic but I cannot find my mistake or an explanation, I found nothing on the internet about it, so here I am :
Everything works when I create a file in the pages folder(I mean every file in pages folder is ok except _app.js or _document.js), I can reach the URL, but I would like to use context, layout or authentification in the future and I need to use the _app and _document override cool things but I can write anything I want in it, it seems my _app.js or _document.js are just useless, never called or I don't know but they just never work.
I tried on 2 projects, here is what I do according to the next documentation :
first, npx create-next-app to create the project, and then add an _app.js for example in pages folder and add :
import React from 'react'
import App from 'next/app'
import Nav from '../components/nav'
class MyApp extends App {
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// static async getInitialProps(appContext) {
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
//
// return { ...appProps }
// }
render() {
const { Component, pageProps } = this.props
return (
<>
<Nav />
<Component {...pageProps} />
</>
);
}
}
export default MyApp
Anybody could tell me what I am doing wrong?
Well, if anybody is going through the same issue, I found what was going on, in fact, after creating for the first time _app.js, I have to restart my docker container, or restart my app with yarn next dev if I want to see the changes or they never appear. I am going to look for more explanations on how SSR and next.js more globaly exactly work to understand their behaviour on this point. Good luck all !
My problem is I want to get data at the beginning of the vue page. I tried to put those codes in mount() but it's still too late. After searching I think maybe created() is a good place or any places before generating the html code. But as I need to import a function so it seems that I cannot use created(). So I am wondering what's the better option to do that?
Right now my code looks like this
<template>
{{ username }}
<template>
<script>
import firebase from 'firebase';
export default {
name: 'page',
data() {
return {
username = "whatever",
}
}
mounted() {
var firebaseConfig = {
// some code
};
firebase.initializeApp(firebaseConfig);
this.username = username from firebase
},
}
</script>
But when I reload the page it shows whatever instead of the username I get from the firebase.
The firebase function needs to resolve before you set the username property. Async the mounted function & await the firebase call
The data initialization looks a bit odd to me.
Usually data should be an Object
In Your case i would suppose it to look something like this:
data: {
username: 'whatever'
}
And further on there seems to be a missing , between data and mounted.
I created a fiddle that works
It is not a sfc but i think it is enough to make things clear.
Is there a way to let react-navigation manage all the navigation aspects while letting redux manage the rest without them getting all tangled up.
react-navigation is not longer supporting redux which makes me pretty sad.
Warning: in the next major version of React Navigation, to be released in Fall 2018, we will no longer provide any information about how to integrate with Redux and it may cease to work.
I don't really care specifically to have the navigation state managed by the redux store but I do want my display state to be managed there. react-navigation requires you passing state around which is fine for small applications but doesn't scale well.
I've got redux working with react-navigation by running connect on each page that I care about. Everything works fine until you fire and action which nukes the local react-navigation state.
Have any of you got react-navigation working with redux in the way I described above?
Here's how I'm doing it. I found the easiest way was to use "connect" on all of my screens when I create the routes. I hope this helps:
const AppNavigator = createStackNavigator(
{
Route1: {
screen: setupReduxContainer(Screen1)
},
Route2: {
screen: setupReduxContainer(Screen2)
}
},
{
initialRouteName: "Route1"
}
);
export const NavigationContainer = createAppContainer(AppNavigator);
export function setupReduxContainer(component) {
const Container = component;
return connect(
state => ({ ...state })
)(props => <Container {...props} />);
}
export default () => (
<Provider store={store}>
<NavigationContainer />
</Provider>
);
I've installed a Meteor phone authentication package mys:accounts-phone, which should add a phone.number subfield into users collection. I try to access this field as follows:
Meteor.user().phone.number
but typescript shows error
Property 'phone' does not exist on type 'User'.
On the other hand, I have custom props in users.profile, and can easily access them in this way.
Insecure is not yet removed. Autopublish is ON.
this happens sometime when our angular component is initialized but our meteor data is not reached from server.
try to use user injection in place of Meteor.user()
import {Component} from "#angular/core";
import { InjectUser } from 'angular2-meteor-accounts-ui';//<--**** import this****
#Component({
selector: "login-buttons",
template
})
#InjectUser('user') //<--*** add this***
export class LoginButtonsComponent {
user: Meteor.User; //<--*** add this ***
constructor(private router: Router) {}
}
now in user variable you will have all values of Meteor.User
if you want to print in html part use this
<div *ngIf="user">
{{user.phone.number}}
</div>
don't forget to install
meteor add accounts-password
meteor npm install --save angular2-meteor-accounts-ui
and in app.module.ts file
import { AccountsModule } from 'angular2-meteor-accounts-ui';
#NgModule({
imports: [
... other modules here
AccountsModule
],
hope this will work. if this not work let me know i will tell you one other solution
Got probable answer from Meteor docs.
It explains why username property appears. By default, Meteor publish only a number of fields considered to be public. To exposure any additional fields they must be published explicitly.
Not yet have time to test, but think it should work.
The other reason, with the same sympthoms, when publication code do not executed at server side. Try to put
Meteor.startup(() => {
// code to run on server at startup
Meteor.publish('userData', function() {
if(!this.userId) return null;
return Meteor.users.find(this.userId
//, {fields: {lastname: 1,}}
);
});
});
in a file within /server folder of your application.