React Native (Sharepoint-application)

Question

I have started learning to code in react native. Have an idea of trying to create an application that (creates / updates / deletes) data from SharePoint lists.

My question is: How do I create a login page associated with Office365 / SharePoint? Want the application to start and check if the user is logged in then retrieve data from SP otherwise log in.

Answer 1

From my point, you should start with Azure AD application. Create a new app registration in Azure AD, give it permissions to SharePoint.
Then go ahead with react-native-azure-ad and build an app, which gets access token for SharePoint. With access token, you can easily call SharePoint REST API.

As far as I know, react native also supports OAuth implicit flow. Which means you can try to get an access token using adaljs.

Answer 2

Rest calls are not different from web REST calls.

First Import 'react-native-sp-auth' you can use npm install react-native-sp-auth

use the following code for login and pull data from SharePoint.

 myLoginButton =async()=>{
    const sp = new RNSharePointAuth(this.state.siteUrl);
    const { digest, token } = await sp.login(this.state.userName,this.state.password);
    if(token){
      await Alert.alert("Login Successfull");
      fetch(this.state.siteUrl + "/_api/Web/Lists/?$filter=Hidden eq false", {
        method: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
            "Cookie":token,
            "Content-Type": "application/json"
        }
      })
      .then((y) => y.json())
      .then((y) => { 
        var conStr ="List Names:";
        y.d.results.forEach(function(item){
          conStr += item.Title + ", ";
        })
        this.setState({status:conStr})})
      // await this.setState({status:token});
      // await Alert.alert(digest+ " " +token);
      // await console.log(digest,token)
    }
    // this.setState({status:"Livingston"});
  }

I used the following code in render()

<TouchableOpacity style={{ borderBottomWidth: 1, borderBottomColor: '#282828' }}
                onPress={() =>this.myLoginButton()} 
                >
              <Text style={{
                  color: '#282828',
                  fontSize: 14
              }}>
                Login
              </Text>
            </TouchableOpacity>