'Integrate Microsoft Graph example into my react native project
I will start by saying that I only have been working with react native for 2 months now. My previous experience is with C# and Xamarin projects. That being said let's go to my issue. I have below login code:
interface LoginScreenProps {
navigation: any,
loadingState: LoadingState,
loginState: LoginState,
login: Function,
loginFail: Function,
loginSuccess: Function,
recoverPassword: Function,
recoverPasswordFail: Function,
recoverPasswordReset: Function,
recoverPasswordSuccess: Function,
hideLoading: Function,
showLoading: Function,
}
const LoginScreen = (props: LoginScreenProps) => {
const [userLogin, setUserLogin] = useState({ email: '', password: '' });
const [recoveryEmail, setRecoveryEmail] = useState('');
const [passwordVisible, setPasswordVisible] = useState(true);
const context = useContext(AuthContext);
const signInAsync = async () => {
await context.signIn;
}
useEffect(() => {
if (props.loginState.isRecoveringPassword) {
props.showLoading();
AuthService.recoverPassword(recoveryEmail).then(() => {
props.recoverPasswordSuccess();
}).catch(error => {
props.recoverPasswordFail(error);
})
} else {
props.hideLoading();
}
}, [props.loginState.isRecoveringPassword]);
useEffect(() => {
if (props.loginState.isLoggingIn) {
props.showLoading();
AuthService.login(userLogin.email, userLogin.password).then(user => {
props.loginSuccess(user);
}).catch(error => {
userLogin.email = '';
userLogin.password = '';
setUserLogin(userLogin);
props.loginFail(error);
})
} else {
props.hideLoading();
}
}, [props.loginState.isLoggingIn]);
useEffect(() => {
if (props.loginState.isLoggedIn) {
props.hideLoading();
userLogin.email = '';
userLogin.password = '';
setUserLogin(userLogin);
props.navigation.navigate('Home');
}
}, [props.loginState.isLoggedIn]);
const login = (userLogin: { email: string, password: string }) => {
setUserLogin(userLogin);
props.login();
}
const register = () => props.navigation.navigate('Register');
const forgotEmailPassword = (email: string) => {
setRecoveryEmail(email);
props.recoverPassword();
}
//style={loginStyle.content}
return (
<SafeAreaView style={loginStyle.content} >
<View>
<Card style={loginStyle.card}>
<Card.Title title=''></Card.Title>
<Card.Content>
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={login}
validationSchema={loginForm}>
{({ handleSubmit, handleChange, errors, setFieldTouched, touched, values, isValid }) => (
<>
<Image
style={loginStyle.imageStyle}
source={require('../../../assets/images/balloonWithText.png')}
/>
{/* fontWeight: 'bold' */}
<Text style={{ color: theme.colors.primary, fontSize: 24, }}>Welcome</Text>
<View style={{ display: 'flex', flex: 0, flexDirection: 'row', marginTop: 5, }}>
<Text style={{
color: '#8F9195',
marginTop: 0,
marginRight: 0,
marginLeft: 0,
}}>
Don't have an account?
</Text>
<Button
onPress={register}
labelStyle={{ fontStyle: 'italic', fontWeight: 'bold', marginLeft: 5, marginTop: 0, marginBottom: 0 }}
uppercase={false}
style={loginStyle.cardButton}
testID='registerButton'>
Register now
</Button>
</View>
<TextInput
label='Email'
testID='email'
keyboardType='email-address'
clearButtonMode='while-editing'
onFocus={() => setFieldTouched('email')}
onChangeText={handleChange('email')}
value={values.email}
autoCapitalize='none'
autoCorrect={false}
returnKeyType="next"
/>
{
touched.email && errors.email ?
<Text testID='error-email' style={{ color: 'red', backgroundColor: 'white' }}>
{errors.email}
</Text>
:
null
}
<TextInput
label='Password'
testID='password'
onFocus={() => setFieldTouched('password')}
onChangeText={handleChange('password')}
value={values.password}
secureTextEntry={passwordVisible}
right={<TextInput.Icon
name={passwordVisible ? "eye" : "eye-off-outline"}
onPress={() => setPasswordVisible(!passwordVisible)}
color={loginStyle.icon.color}
/>}
autoCorrect={false}
autoCapitalize='none'
returnKeyType="next"
/>
{
touched.password && errors.password ?
<Text testID='error-password' style={{ color: 'red', backgroundColor: 'white' }}>
{errors.password}
</Text>
:
null
}
<Button
onPress={() => forgotEmailPassword(values.email)}
uppercase={false}
style={loginStyle.cardButton}
testID='recoveryButton'
disabled={values.email === '' || errors.email ? true : false}>
Forgot email/password
</Button>
<Button
onPress={handleSubmit}
mode='contained'
disabled={!isValid}
style={loginStyle.cardButtonLogin}
testID='loginButton'
labelStyle={loginStyle.loginLabelStyle}>
Sign in
</Button>
<Text
style={{ marginTop: 20, marginBottom: 20, textAlign: 'center' }}>
or Sign in with
</Text>
<View style={{ marginTop: 5, marginBottom: 10 }}>
{/* Icon.Button Component */}
<Icon.Button
name="windows"
onPress={signInAsync}
color='white'
backgroundColor={theme.colors.primary}
style={{ borderColor: theme.colors.primary, borderWidth: 1, justifyContent: 'center' }}
iconStyle={{ color: 'white', }}>
MICROSOFT
</Icon.Button>
</View>
</>
)}
</Formik>
</Card.Content>
</Card>
</View>
{
props.loginState.isRecoveredPassword ?
<Snackbar
style={loginStyle.snackbar}
theme={{ colors: { surface: 'black' }, }} //{surface: theme.colors.primary}
duration={2000}
visible={true}
onDismiss={() => props.recoverPasswordReset()}
testID='recoverPasswordSuccess'>
<Text style={loginStyle.snackbarText}>Recovery email sent</Text>
</Snackbar>
: null
}
{
props.loginState.error ?
<Snackbar
style={loginStyle.snackbar}
theme={{ colors: { surface: 'black' }, }} //{surface: theme.colors.primary}
duration={2000}
visible={true}
onDismiss={() => props.recoverPasswordReset()}
testID='errorMessage'>
<Text style={loginStyle.snackbarText}>{props.loginState.error.message}</Text>
</Snackbar>
: null
}
</SafeAreaView>
);
}
const mapStateToProps = (store: AppState) => ({
loadingState: store.loading,
loginState: store.login
})
const mapDispatchToProps = (dispatch: any) => (
bindActionCreators({
login: login,
loginFail: loginFail,
loginSuccess: loginSuccess,
recoverPassword: recoverPassword,
recoverPasswordFail: recoverPasswordFail,
recoverPasswordReset: recoverPasswordReset,
recoverPasswordSuccess: recoverPasswordSuccess,
hideLoading: hide,
showLoading: show,
}, dispatch)
)
export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
Also I have AuthService class that deals with login, registration and password recovery:
class AuthService {
recoverPassword(email: string) : Promise<void> {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(email == '[email protected]'){
reject({message: 'Email not found'})
} else {
resolve();
}
}, 2000)
})
}
login(email: string, password: string) : Promise<User> {
return new Promise<User>((resolve, reject) => {
setTimeout(() => {
if (email == '[email protected]'){
reject({message: 'User not found'})
} else {
const user: User = {
email,
id: 'userId',
firstName: "",
lastName: "",
password: "",
confirmPassword: "",
phoneNumber: ""
}
resolve(user);
}
}, 2000)
})
}
register(firstName: string, lastName: string, email: string, password: string, confirmPassword: string, phoneNumber: string) : Promise<User> {
return new Promise<User>((resolve, reject) => {
setTimeout(() => {
if (firstName == ''){
reject({message: 'First Name is required'})
}
if (lastName == ''){
reject({message: 'Last Name is required'})
}
if (email == ''){
reject({message: 'Email is required'})
}
if (password == ''){
reject({message: 'Password is required'})
}
if (confirmPassword == ''){
reject({message: 'Confirm password is required'})
}
if (phoneNumber == ''){
reject({message: 'Phone number is required'})
} else {
const user: User = {
email,
id: 'userId',
firstName: "",
lastName: "",
password: "",
confirmPassword: "",
phoneNumber: ""
}
resolve(user);
}
}, 2000)
})
}
}
export default new AuthService;
What I am trying to achieve is to integrate Microsoft Graph example from this link: https://docs.microsoft.com/en-us/graph/tutorials/react-native into my project. I spent couple of weeks now trying to do that but because of my lack of knowledge working with react native I have not been successful. Any help would be much appreciated.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|