I'm stuck trying to find the best way to do a user search in the database and if there is mount the page, if there is no redirect to the root. This is the last thing I tried, but always redirect to root.
App.js
function App() {
return (
<div className="container">
<Suspense fallback={<div></div>}>
<Switch>
<Route exact path="/" render={() => <Home />} />
<Route path="/login" render={() => <Login />} />
<Route path="/register" render={() => <Register />} />
<Route path="/resetpassword" render={() => <ResetPassword />} />
<Route path="/:username">
<Middleware />
</Route>
<Route render={() => <Home />} />
</Switch>
</Suspense>
</div>
);
}
Middleware.js
const Middleware = () => {
const [exist, setExist] = useState(false);
const { username } = useParams()
useEffect(() => {
var isCancelled = false;
async function fetch() {
await datosFirebaseUsuario(username)
.then((data) => {
if (data) {
if (!isCancelled) {
setExist(true)
}
}
});
}
fetch();
return () => {isCancelled = true}
}, [username])
if (!exist) {
return <Redirect to="/" />
}
return (
<>
<Header />
<Links />
<Footer />
</>
)
}
Related
I am new with React JS and I am trying to be able to call the list of products by their category. That should be done from the Navbar, but I could not sort it out. If there is someone to help me with it I would much appreciate it. Below is the code.
this is my route page
const Pages = () => {
return (
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/products/:_type" element={<Products />}/>
</Routes>
)
}
this one is for fetching products
let params = useParams()
const[shopProducts,setShopProducts] = useState([])
const[ifFetch,setIfFetch] = useState(false)
const getProducts = async (name) =>{
const query = `*[_type ==${name}]`
await client.fetch(query).then((res) => {
//console.log(res)
setShopProducts(res)
console.log(shopProducts)
setIfFetch(true)
})
}
useEffect(()=>{
getProducts(params.type)
},[params.type,ifFetch])
and this is my link from navbar
<NavLink to={'/products/men'}>Men</NavLink>
Route page
const Pages = () => {
return (
<Routes>
<Route path="/" element={<Home />}/>
<Route path="products/:type" element={<Products />}/>
</Routes>
)
}
And get route parameter like this way -
let { type } = useParams()
const[shopProducts,setShopProducts] = useState([])
const[ifFetch,setIfFetch] = useState(false)
useEffect(()=> {
client.fetch(`https://ho4y55im.api.sanity.io/v2021-10-21/data/production?query=${type}`)
.then((res)=> {
setShopProducts(res)
setIfFetch(true)
}
},[type, ifFetch])
Goal:
Display the content of the code in relation to
<Router>
{isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}
</Router>
Problem:
When I use codesandbox or Stackblitz it wont display the content. However, when I use my local computer with VS code.
Same code that is used in my local development is the same for the sandbox and stackblitz.
In the end the result display in local development but not in codesandbox stand stackblitz.
However, it creates a lot of message and error about
"Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."
Question:
How should it be solved in order to be displayed at stackblitz and also not displaying many message.
Info:
*The foundation of the code is from this webpage (https://stackblitz.com/edit/react-ts-conditional-route-e9gscp)
*If you dont want to show the error message, exchange the code to
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
Stackblitz:
https://stackblitz.com/edit/react-ts-xjaspz
Sandbox:
https://codesandbox.io/s/confident-swanson-uie1n1
Thank you!
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.tsx
import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Link, Route, Routes, Navigate } from 'react-router-dom';
import Login from './Login';
import Home from './Home';
const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
useEffect(() => {
}, [isAuthenticated]);
const handle_login = () => {
setIsAuthenticated(true);
};
const handle_logout = () => {
setIsAuthenticated(false);
};
const authenticatedRoutes = (
<React.Fragment>
<Routes>
<Route
path="/home"
element={<Home handle_logout={handle_logout} />}
/>
</Routes>
<Navigate to="/home" />
</React.Fragment>
);
const nonAuthenticatedRoutes = (
<React.Fragment>
<Routes>
<Route
path="/login"
element={<Login handle_login={handle_login} />}
/>
</Routes>
<Navigate to="/login" />
<br />
<br />
</React.Fragment>
);
return (
<Router>
{isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}
</Router>
);
};
export default App;
*
{isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
*/
login.tsx
import React from "react";
interface LoginProps {
handle_login: () => void;
}
const Login: React.FC<LoginProps> = props => {
return (
<React.Fragment>
<title> Login </title>
<div className="container">
<strong>login page</strong> <br />
<br />
<button onClick={props.handle_login}> Login </button>
</div>
</React.Fragment>
);
};
export default Login;
Home.tsx
import React from 'react';
interface HomeProps {
handle_logout: () => void;
}
const Home: React.FC<HomeProps> = (props) => {
return (
<React.Fragment>
<header>
{/* <h2>Home </h2> */}
<button slot="end" onClick={props.handle_logout}>
{' '}
Logout{' '}
</button>
</header>
<title> Home </title>
<div className="container">
<strong>Home page</strong>
<p>Click logout on the titlebar to logout </p>
</div>
</React.Fragment>
);
};
export default Home;
https://stackblitz.com/edit/react-ts-eghbyc?file=index.tsx
App.tsx
import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import Home from './Home';
import Login from './Login';
const App: React.FC = () => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
useEffect(() => {
console.log('Authentication state - ', isAuthenticated);
}, [isAuthenticated]);
const handle_login = () => {
setIsAuthenticated(true);
};
const handle_logout = () => {
setIsAuthenticated(false);
};
const authenticatedRoutes = (
<React.Fragment>
<Routes>
<Route
path="/home"
element={<Home handle_logout={handle_logout} />}
/>
<Route
path="*"
element={<Navigate to="/home" />}
/>
</ Routes>
</React.Fragment>
);
const nonAuthenticatedRoutes = (
<React.Fragment>
<Routes>
<Route
path="/login"
element={<Login handle_login={handle_login} />}
/>
<Route
path="*"
element={<Navigate to="/login" />}
/>
</ Routes>
<br />
<br />
<br />
<br />
</React.Fragment>
);
return (
<Router>
{/* <IonRouterOutlet> */}
{isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}
{/* </IonRouterOutlet> */}
</Router>
);
};
export default App;
Home.tsx
import React from 'react';
interface HomeProps {
handle_logout: () => void;
}
const Home: React.FC = (props) => {
return (
<React.Fragment>
{/* Home */}
<button slot="end" onClick={props.handle_logout}>
{' '}
Logout{' '}
</button>
</header>
<title> Home </title>
<div className="container">
<strong>Home page</strong>
<p>Click logout on the titlebar to logout </p>
</div>
</React.Fragment>
);
};
export default Home;
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Login.tsx
import React from "react";
interface LoginProps {
handle_login: () => void;
}
const Login: React.FC<LoginProps> = props => {
return (
<React.Fragment>
<title> Login </title>
<div className="container">
<strong>login page</strong> <br />
<br />
<button onClick={props.handle_login}> Login </button>
</div>
</React.Fragment>
);
};
export default Login;
I made an simple taskshceduler with react router 5 and react redux and work fine still.
Now I try animating between different route with react-transition-group.
If I click the url changed BUT the screen not re-render until i reload the page mannualy.
Th animation only works when i use the backward button on the browser
I not get error to the console.
What is the problem and What is the solution?
Thank you
App.js
import { Fragment, useEffect, Suspense } from "react";
import { useSelector, useDispatch } from "react-redux";
import Notification from "./shared/UIElements/Notification";
import { sendCartData, fetchCartData } from "./store/cart-actions";
import Auth from "./Auth/page/Auth";
import TaskMain from "./tasks/page/TaskMain";
import TaskFilter from "./tasks/page/TaskFilter";
import MainNavigation from "./Layout/Navigation/MainNavigation";
import LoadingSpinner from "./shared/UIElements/LoadingSpinner";
import TransitionGroup from "react-transition-group/TransitionGroup";
import CSSTransition from "react-transition-group/CSSTransition";
import "../src/scss/styles.css";
import UpdateTask from "./tasks/page/UpdateTask";
import {
BrowserRouter as Router,
Route,
Redirect,
Switch,
useLocation,
} from "react-router-dom";
import NewTask from "./tasks/page/NewTask";
let isInitial = true;
function App() {
const dispatch = useDispatch();
const cart = useSelector((state) => state.cart);
const notification = useSelector((state) => state.ui.notification);
const logged = useSelector((state) => state.cart.logged);
const location = useLocation();
useEffect(() => {
dispatch(fetchCartData());
console.log(`fetch usefeect`);
}, [dispatch]);
useEffect(() => {
if (isInitial) {
isInitial = false;
return;
}
if (cart.changed) {
dispatch(sendCartData(cart));
}
}, [cart, dispatch]);
let routes;
if (!logged) {
routes = (
<Switch location={location}>
<Route path="/" exact>
<Auth />
</Route>
<Redirect to="/" />
</Switch>
);
} else {
routes = (
<Switch location={location}>
<Route path="/" exact>
<TaskMain />
</Route>
<Route path="/tasks/new" exact>
<NewTask />
</Route>
<Route path="/tasks/update/:id" exact>
<UpdateTask />
</Route>
<Route path="/items" exact>
<TaskFilter />
</Route>
<Redirect to="/" />
</Switch>
);
}
return (
<Router>
<Fragment>
{notification && (
<Notification
status={notification.status}
title={notification.title}
message={notification.message}
/>
)}
<MainNavigation />
<TransitionGroup>
<CSSTransition
timeout={1250}
classNames='fade'
key={location.key}
>
<Suspense
fallback={
<div className="center">
<LoadingSpinner></LoadingSpinner>
</div>
}
>
{routes}
</Suspense>
</CSSTransition>
</TransitionGroup>
</Fragment>
</Router>
);
}
export default App;
App.css
.fade-enter {
opacity: 0;
z-index: 1;
}
.fade-enter.fade-enter-active {
transition: opacity 1250ms ease-in;
opacity: 0;
}
MainNavigation.js
import React, { useState } from 'react';
import NavLinks from './NavLinks';
import SideDrawer from './SideDrawer';
import Backdrop from '../UIElements/Backdrop';
const MainNavigation = (props) => {
const [drawerIsOpen, setDrawerIsOpen] = useState(false);
const openDrawerHandler = () => {
setDrawerIsOpen(true);
};
const closeDrawerHandler = () => {
setDrawerIsOpen(false);
};
return (
<React.Fragment>
{drawerIsOpen && <Backdrop onClick={closeDrawerHandler} />}
<SideDrawer show={drawerIsOpen} onClick={closeDrawerHandler}>
<nav className="main-navigation__drawer-nav">
<NavLinks />
</nav>
</SideDrawer>
<header className="main-header header-grid">
<button
className="main-navigation__menu-btn"
onClick={openDrawerHandler}
>
<span />
<span />
<span />
</button>
<div className="title-grid">
<h1 className="main-navigation__title fontsize-18">TODO APP</h1>
</div>
<div className="links-grid">
<NavLinks />
</div>
</header>
</React.Fragment>
);
};
export default MainNavigation;
NavLink.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {useHistory } from "react-router-dom";
import { cartActions } from "../../store/cart-slice";
const NavLinks = (props) => {
const logged = useSelector((state) => state.cart.logged);
const history = useHistory();
const dispatch = useDispatch();
const foOldalHandler = () => {
history.push(`/`);
};
const szuresHandler = () => {
history.push(`/items`);
};
const logoutHanler = () => {
dispatch(cartActions.logout());
};
return (
<React.Fragment>
<div>
<nav className="nav-links">
<button className="nav-links-button" onClick={foOldalHandler}>Főoldal</button>
{logged && <button className="nav-links-button" onClick={szuresHandler}>Szűrés</button>}
{logged && <button className="nav-links-button" onClick={logoutHanler}>Kijelentkezés</button>}
</nav>
</div>
</React.Fragment>
);
};
export default NavLinks;
SideDrawer.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
const SideDrawer = props => {
const content = (
<CSSTransition
in={props.show}
timeout={200}
classNames="slide-in-left"
mountOnEnter
unmountOnExit
>
<aside className="side-drawer" onClick={props.onClick}>{props.children}</aside>
</CSSTransition>
);
return ReactDOM.createPortal(content, document.getElementById('drawer-hook'));
};
export default SideDrawer;
index.js
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/index';
import './index.css';
import App from './App';
import {
BrowserRouter,
BrowserRouter as Router,
} from "react-router-dom";
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
NewTask.js
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { cartActions } from "../../store/cart-slice";
import { v4 as uuid } from "uuid";
export default function NewTask() {
const dispatch = useDispatch();
const username = useSelector((state) => state.cart.username);
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [status, setStatus] = useState("aktiv");
const history = useHistory();
const usernameChangeHandler = (event) => {
setTitle(event.target.value);
};
const descriptionChangeHandler = (event) => {
setDescription(event.target.value);
};
const statusChangeHandler = (event) => {
setStatus(event.target.value);
};
const newTaskHandler = (event) => {
event.preventDefault();
console.log(`title: ${title} description ${description} status: ${status}`);
dispatch(
cartActions.addTask({
id: uuid(),
username,
title,
description,
status,
})
);
history.push("/");
};
return (
<div>
<div className='main-introduction'>
<h2 >Hello {username}!</h2>
<h1>Milyen feladatot szeretnél elvégezni?</h1>
</div>
<form onSubmit={newTaskHandler}>
<label htmlFor="title">A feladat címe</label>
<br></br>
<input
id="title"
type="text"
value={title}
onChange={usernameChangeHandler}
className='input-width'
required
/>
<br></br>
<label htmlFor="description">A feladat leírása:</label>
<br></br>
<input
id="description"
type="text"
value={description}
onChange={descriptionChangeHandler}
className='input-width'
required
/>
<br></br>
<label htmlFor="status">A feladat állapotta:</label>
<br></br>
<div onChange={statusChangeHandler}>
<input type="radio" value="aktiv" name="status" required /> Aktív
<input type="radio" value="kesz" name="status" /> Teljesített
</div>
<br></br>
<button type="submit">Hozzáad</button>
</form>
</div>
);
}
package.json
"dependencies": {
"#reduxjs/toolkit": "^1.5.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.1",
"react-spring": "^9.4.3",
"react-transition-group": "^4.4.2",
"use-sound": "^4.0.1",
"uuidv4": "^6.2.12",
"web-vitals": "^0.2.4"
},
I think found the answer. with help for Drew Reese
Organize my route components different file.
It cause the right rendering.
Besides that using location.pathname instead location.key.
If you have better solution please write here
Thank you
App.js
import {
Fragment,
useEffect,
Suspense,
} from "react";
import { useSelector, useDispatch } from "react-redux";
import Notification from "./shared/UIElements/Notification";
import { sendCartData, fetchCartData } from "./store/cart-actions";
import MainNavigation from "./Layout/Navigation/MainNavigation";
import LoadingSpinner from "./shared/UIElements/LoadingSpinner";
import TransitionGroup from "react-transition-group/TransitionGroup";
import CSSTransition from "react-transition-group/CSSTransition";
import "../src/scss/styles.css";
import {
BrowserRouter as Router,
useLocation,
} from "react-router-dom";
import AuthenticationApp from "./AuthenticationApp";
import TaskApp from "./TaskApp";
let isInitial = true;
function App() {
const dispatch = useDispatch();
const cart = useSelector((state) => state.cart);
const notification = useSelector((state) => state.ui.notification);
const logged = useSelector((state) => state.cart.logged);
const location = useLocation();
useEffect(() => {
dispatch(fetchCartData());
console.log(`fetch usefeect`);
}, [dispatch]);
useEffect(() => {
if (isInitial) {
isInitial = false;
return;
}
if (cart.changed) {
dispatch(sendCartData(cart));
}
}, [cart, dispatch]);
return (
<Router>
<Fragment>
{notification && (
<Notification
status={notification.status}
title={notification.title}
message={notification.message}
/>
)}
<MainNavigation />
<TransitionGroup>
<CSSTransition
timeout={1250}
classNames="fade"
pathname={location.pathname}
>
<Suspense
fallback={
<div className="center">
<LoadingSpinner></LoadingSpinner>
</div>
}
>
{!logged && <AuthenticationApp />}
{logged && <TaskApp />}
</Suspense>
</CSSTransition>
</TransitionGroup>
</Fragment>
</Router>
);
}
export default App;
AuthenticationApp.js
import { Route, Redirect, Switch, useLocation } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import CSSTransition from "react-transition-group/CSSTransition";
import { Suspense } from "react";
import LoadingSpinner from "./shared/UIElements/LoadingSpinner";
import Auth from "./Auth/page/Auth";
const AuthenticationApp = ({}) => {
const location = useLocation();
return (
<TransitionGroup>
<CSSTransition timeout={1250} classNames="fade" key={location.pathname}>
<Suspense
fallback={
<div className="center">
<LoadingSpinner></LoadingSpinner>
</div>
}
>
<Switch>
<Route path="/" exact>
<Auth />
</Route>
<Redirect to="/" />
</Switch>
</Suspense>
</CSSTransition>
</TransitionGroup>
);
};
export default AuthenticationApp;
TaskApp.js
import { Route, Redirect, Switch, useLocation } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import CSSTransition from "react-transition-group/CSSTransition";
import { Suspense } from "react";
import LoadingSpinner from "./shared/UIElements/LoadingSpinner";
import TaskMain from "./tasks/page/TaskMain";
import NewTask from "./tasks/page/NewTask";
import UpdateTask from "./tasks/page/UpdateTask";
import TaskFilter from "./tasks/page/TaskFilter";
const TaskApp = () => {
const location = useLocation();
return (
<TransitionGroup>
<CSSTransition timeout={1250} classNames="fade" key={location.pathname}>
<Suspense
fallback={
<div className="center">
<LoadingSpinner></LoadingSpinner>
</div>
}
>
<Switch>
<Route path="/" exact>
<TaskMain />
</Route>
<Route path="/tasks/new" exact>
<NewTask />
</Route>
<Route path="/tasks/update/:id" exact>
<UpdateTask />
</Route>
<Route path="/items" exact>
<TaskFilter />
</Route>
<Redirect to="/" />
</Switch>
</Suspense>
</CSSTransition>
</TransitionGroup>
);
};
export default TaskApp;
any Idea why I m getting this issue when I click on sign Up by email and password in React-Native and Firebase ?
[Error: [auth/configuration-not] An internal error has occurred. [ CONFIGURATION_NOT_FOUND ]]
My App.js file
import React,{useEffect,useState} from 'react';
import 'react-native-gesture-handler';
import {
StatusBar,
View,
Text
} from 'react-native';
import {Provider} from 'react-redux';
import {store} from './redux/store';
import Home from './screens/Home';
import Cart from './screens/Cart';
import CartDone from './screens/CartDone';
import Login from './screens/Login';
import Register from './screens/Register';
import {NavigationContainer} from '#react-navigation/native';
import {createDrawerNavigator,DrawerContentScrollView,DrawerItem} from '#react-navigation/drawer';
import Product from './screens/Product';
import {Avatar,Drawer} from 'react-native-paper';
import auth from '#react-native-firebase/auth';
const DrawerNav = createDrawerNavigator();
const App=() => {
// Set an initializing state whilst Firebase connects
const [initializing, setInitializing] = useState(true);
const [user, setUser] = useState();
// Handle user state changes
function onAuthStateChanged(user) {
setUser(user);
if (initializing) setInitializing(false);
}
useEffect(() => {
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
return subscriber; // unsubscribe on unmount
}, []);
if (initializing) return null;
if(!user){
return(
<Provider store={store}>
<StatusBar barStyle="white" backgroundColor="red" />
<NavigationContainer>
<DrawerNav.Navigator InitialRoute="Login" drawerContent={(props)=><DrawerContent {...props}/>}>
<DrawerNav.Screen name="Login" component={Login} />
<DrawerNav.Screen name="Register" component={Register} />
</DrawerNav.Navigator>
</NavigationContainer>
</Provider>
);
}
return (
<Provider store={store}>
<StatusBar barStyle="white" backgroundColor="red" />
<NavigationContainer>
<DrawerNav.Navigator InitialRoute="Home" drawerContent={(props)=><DrawerContent {...props}/>}>
<DrawerNav.Screen name="Home" component={Home} />
<DrawerNav.Screen name="Cart" component={Cart} />
<DrawerNav.Screen name="CartDone" component={CartDone} />
<DrawerNav.Screen name="Product" component={Product} />
</DrawerNav.Navigator>
</NavigationContainer>
</Provider>
);
};
function DrawerContent(props){
return(
<DrawerContentScrollView {...props}>
<View style={{flex:1,alignItems:"center"}}>
<Avatar.Image style={{backgroundColor:'white'}} size={130} source={require('./assets/avatar.png')}/>
</View>
<Drawer.Section>
<DrawerItem
label="Home"
icon={()=>(
<Avatar.Icon backgroundColor="white" color="black" size={30} icon="home"/>
)}
onPress={()=>props.navigation.navigate('Home')}
/>
<DrawerItem
label="Cart"
icon={()=>(
<Avatar.Icon backgroundColor="white" color="black" size={30} icon="cart"/>
)}
onPress={()=>props.navigation.navigate('Cart')}
/>
<DrawerItem
label="Login"
icon={()=>(
<Avatar.Icon backgroundColor="white" color="black" size={30} icon="account"/>
)}
onPress={()=>props.navigation.navigate('Login')}
/>
</Drawer.Section>
</DrawerContentScrollView>
);
}
export default App;
my Register.js file :
import React,{useState} from 'react'
import {View,StyleSheet,TouchableOpacity,TextInput} from 'react-native';
import Header from '../components/header';
import {Item,Input,Icon,Label,CheckBox,ListItem,Body,Text} from "native-base";
//react-native-hide-show-password-input
//import auth from '#react-native-firebase/auth';
import { ScrollView } from 'react-native-gesture-handler';
import firestore from '#react-native-firebase/firestore';
export default Register = ({navigation})=>{
return (
<Header screen="Register" component={Main} navigation={navigation} />
)
}
const Main=(props)=>{
const [email,setemail]=useState('');
const [password,setpassword]=useState('');
const [firstName,setfirstName]=useState('');
const [lastName,setLastName]=useState('');
const [secureText,setSecureText]=useState(true);
const [isChecked,setisChecked]=useState(false);
function CreateUser(){
if(email!="" && email!=null && password!="" && password!=null && isChecked==true ){
auth()
.createUserWithEmailAndPassword(email,password)
.then(() => {
console.log('User account created & signed in!');
})
.catch(error => {
if (error.code === 'auth/email-already-in-use') {
console.log('That email address is already in use!');
}
if (error.code === 'auth/invalid-email') {
console.log('That email address is invalid!');
}
console.log("last one",error);
});
}
// adding user to firestore
/*firestore()
.collection('Users')
.add({
name: firstName+" "+lastName,
email : email,
password : password,
})
.then(() => {
console.log('User added!');
})
.catch(err=>console.log(err)); */
}
return (
<ScrollView>
<View style={styles.Container}>
<View style={styles.form}>
<Item rounded style={styles.inputstyle}>
<Input
placeholder="First Name"
value={firstName}
onChangeText={text =>setfirstName(text)}
underlineColor="transparent"
/>
</Item>
<Item rounded style={styles.inputstyle}>
<Input
placeholder="Last Name"
value={lastName}
onChangeText={text =>setLastName(text)}
underlineColor="transparent"
/>
</Item>
<Item rounded style={styles.inputstyle}>
<Input
placeholder="Email"
value={email}
onChangeText={text =>setemail(text)}
underlineColor="transparent"
/>
</Item>
<Item rounded style={styles.inputstyle}>
<Input secureTextEntry={secureText} onChangeText={(text)=>setpassword(text)} placeholder='password'/>
<Icon active onPress={()=>setSecureText(secureText==true ? false : true)} name={secureText==true ? "eye-off" : "eye"} />
</Item>
<View style={styles.termscheckboxContainer}>
<ListItem>
<CheckBox onPress={()=>setisChecked(isChecked==false ? true : false)} checked={isChecked} />
<Text style={{ marginLeft:10 }}>Accept the terms and conditions</Text>
</ListItem>
</View>
<TouchableOpacity
onPress={()=>CreateUser()}
style={styles.submit}>
<Text style={styles.submittxt}>Sign up</Text>
</TouchableOpacity>
<View style={styles.divid}>
<View style={styles.line} />
<Text style={styles.or}>or</Text>
<View style={styles.line} />
</View>
<View style={styles.secondpanel}>
<TouchableOpacity style={styles.facebook}>
<Text style={styles.txtsignwith}>Sign In with Facebook</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.google}>
<Text style={styles.txtsignwith}>Sign In with Google</Text>
</TouchableOpacity>
<View style={styles.signupqs}>
<Text style={styles.signupqstxtA}>Already have an account?</Text>
<TouchableOpacity
onPress={()=>props.navigation.navigate('Login')}
style={styles.signupqsbtn}>
<Text style={styles.signupqstxtB}>Sign In</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</ScrollView>
)
}
I have followed all instructions in React Native Firebase documentation.
Auth function login verification working .
I have also enabled email and password service from firebase.
thanks.
You got this error because you haven't enabled Authentication mode in FireStore console e.g. Email-Password etc.
Have you checked the project_id in your Android app google-services.json file is the same as the Firebase project for which you enabled Google Sign In Authentication? If that is the case and you have not edited the google-services.json file, you can file a support ticket to Firebase.
the problem was the name of the android project is not the same with the name I gave to it on firebase , please if any one faced the same problem just check the name on google firebase file if it has the same configuration name with the project name on firebase. and check all other configurations that you entred manualy on the firebase website.
I am trying to integrate Routes using React Router in Meteor Project. I have followed the Meteor React documentation but somehow its not working. Have tried with "Router" instead of "BrowserRouter" but no luck. Any suggestions on this.
imports/startup/client/routes.js
import { BrowserRouter, Route, Switch } from "react-router-dom";
import App, City , NotFound from "respective-modules";
export const renderRoutes = () => {
<BrowserRouter>
<div>
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/city" component={City} />
<Route component={NotFound} />
</Switch>
</div>
</BrowserRouter>;
client/main.html
<body>
<div id="react-target"></div>
</body>
client/main.jsx
import { renderRoutes } from "/imports/startup/client/routes.js";
Meteor.startup(() => {
render(renderRoutes(), document.getElementById("react-target"));
});
But a blank page is getting appeared.
If the code you are showing is correct (i.e., copied accurate from what you are running), then you just have an extra curly bracket:
export const renderRoutes = () => {
<BrowserRouter>
needs to be either:
export const renderRoutes = () =>
<BrowserRouter>
or
export const renderRoutes = () => {
return <BrowserRouter>