firebase auth set up

App.js

@@ -1,16 +1,42 @@
 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
+import React, { Component } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import fire from './config/fire';
+import Login from './Login'
+import Home from './Home'
 
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      user : {}
+    }
+  } 
+  componentDidMount() {
+    this.authListener();
+  }
+  authListener() {
+    fire.auth().onAuthStateChanged((user)=>{
+      if(user) {
+        this.setState({user})
+      } else {
+        this.setState({user : null})
+      }
+    })
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Open up App.js to start working on your app!</Text>
+        <StatusBar style="auto" />
+        {this.state.user ? (<Home/>) : (<Login/>)}
+      </View>
+    );
+  }
 }
 
+export default App;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

Home.js

@@ -0,0 +1,33 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+class Home extends Component {
+    constructor(props) {
+        super(props)
+        this.state={
+
+        }
+    }
+    render() {
+        return (
+            <View style={styles.container}>
+            <Text>You are logged in!!!</Text>
+            <StatusBar style="auto" />
+            {/* <button>Logout</button> */}
+          </View>
+        );
+      }
+}
+
+export default Home;
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+

Login.js

@@ -0,0 +1,90 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { Component } from 'react';
+import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+import fire from './config/fire';
+
+class Login extends Component {
+    constructor(props) {
+        super(props);
+        this.login = this.login.bind(this);
+        this.signup = this.signup.bind(this);
+        this.state={
+            email : "",
+            password : ""
+        }
+    }
+    login(e) {
+        fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{
+            console.log(u)
+        }).catch((err)=>{
+            console.log(err);
+        })
+        console.warn(this.state);
+    }
+    signup(e) {
+        fire.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((u)=> {
+            console.log(u)
+        }).catch((err)=>{
+            console.log(err);
+        })
+    }
+    render() {
+        return (
+            <View style={styles.container}>
+            <TextInput style={userInput.container}
+            placeholder="enter email address"
+            onChangeText={(text) => { this.setState({email : text}) }}
+            />
+            <TextInput style={userInput.container}
+            placeholder="enter password right here"
+            secureTextEntry={true}
+            onChangeText={(text) => { this.setState({password : text}) }}
+            secureTextEntry={true}
+           />
+           <Button title="Login" onPress={() => {this.login()}} />
+           <Button title="Sign Up" onPress={() => {this.signup()}} />
+
+            <Text>Please login</Text>
+            <StatusBar style="auto" />
+            {/* <form>
+                <input
+                type='email'
+                id="email"
+                placeholder="enter email address"
+                onChange={this.handleChange}
+                value={this.state.email}
+                />
+                <input
+                type="pasdsword"
+                id="password"
+                placeholder="enter password"
+                value={this.state.password}
+                />
+                <button onClick={this.login}>Login</button>
+                <button onClick={this.signup}>Signup</button>
+
+            </form> */}
+          </View>
+        );
+      }
+}
+
+export default Login;
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+
+  const userInput = StyleSheet.create({
+    container: {
+      borderWidth: 2,
+      margin: 20,
+      borderColor: 'skyblue',
+    },
+  });
+

config/fire.js

@@ -0,0 +1,16 @@
+import firebase from 'firebase';
+
+//firebase configuration for Firebase SDK
+var firebaseConfig = {
+    apiKey: "AIzaSyBig31UCzwScQOVOOhfdYReZQbu4WAC2sY",
+    authDomain: "shellhacks-firebase-auth.firebaseapp.com",
+    databaseURL: "https://shellhacks-firebase-auth.firebaseio.com",
+    projectId: "shellhacks-firebase-auth",
+    storageBucket: "shellhacks-firebase-auth.appspot.com",
+    messagingSenderId: "935368673348",
+    appId: "1:935368673348:web:c543780fe59fa257ca5411"
+  };
+
+  const fire = firebase.initializeApp(firebaseConfig);
+
+  export default fire;