Scribd
Upload
34 views3 pages

React Native Auth Project

This document is a React Native application that integrates Firebase for user authentication. It includes functionality for user sign-up and sign-in, with validation for email and password fields. The app uses NativeBase components for the user interface and handles Firebase initialization and authentication processes.

Uploaded by

Momina Arif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views3 pages

React Native Auth Project

This document is a React Native application that integrates Firebase for user authentication. It includes functionality for user sign-up and sign-in, with validation for email and password fields. The app uses NativeBase components for the user interface and handles Firebase initialization and authentication processes.

Uploaded by

Momina Arif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React from 'react';

import {View, Text, StyleSheet} from 'react-native';


import * as firebase from 'firebase';
import {
Header,
Label,
Container,
Content,
Form,
Icon,
Button,
Input,
Item,
Root,
} from 'native-base';

const firebaseConfig = {
apiKey: 'AIzaSyAH-NGVmQRR-7_M9ZNjELy87U6vYWvw3-Q',
authDomain: 'foodproject-5ac71.firebaseapp.com',
projectId: 'foodproject-5ac71',
storageBucket: 'foodproject-5ac71.appspot.com',
messagingSenderId: '1080322425287',
appId: '1:1080322425287:web:a3d13e569aebe328a459e2',
measurementId: 'G-5LBS1M2L4J',
};
if (!firebase.apps.length) {
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
}

class App extends React.Component {


constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
}

signUp = (email, password) => {


try {
if (!email || !password) {
alert('Please enter all fields');
return;
}
if (this.state.password.length < 6) {
alert('Enter Atleast Six Characters');
return;
}

firebase.auth().createUserWithEmailAndPassword(email, password);
} catch (error) {
console.log(error.toString());
}
};

signIn = (email, password) => {


try {
if (!email || !password) {
alert('Please enter all fields');
return;
}
firebase.auth().signInWithEmailAndPassword(email, password);
alert('Your are successful log in');
} catch (error) {
console.log(error.toString());
}
};
render() {
return (
<Container style={styles.container}>
<Form>
<Item floatingLabel>
<Label>Email</Label>
<Input
autoCapitalize="none"
autoCorrect={false}
onChangeText={email => this.setState({email})}
/>
</Item>

<Item floatingLabel>
<Label>Password</Label>
<Input
secureTextEntry={true}
autoCapitalize="none"
autoCorrect={false}
onChangeText={password => this.setState({password})}
/>
</Item>
<Button
style={{marginTop: 10}}
full
rounded
success
onPress={() => this.signIn(this.state.email, this.state.passw
ord)}>
<Text style={{color: 'white'}}>Log In</Text>
</Button>
<Button
style={{marginTop: 10}}
full
rounded
primary
onPress={() => this.signUp(this.state.email, this.state.passw
ord)}>
<Text style={{color: 'white'}}>Log Up</Text>
</Button>
</Form>
</Container>
);
}
}

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
padding: 10,
},
});
export default App;

You might also like