How to authenticate CloudKit JS in react JS or React-Redux JS

Question

I am very new to web development. I have downloaded the CloudKit JS & adding in index.html in script tag. And I made sure it loads before my react-redux bundle JS.

  <script src="/cloudkit.js"></script>
  <script src="/bundle.js"></script>

I have made single class component & I am running authentication on component did mount as follows.

componentWillMount() {
CloudKit.configure({
  containers: [{
    containerIdentifier: '<container ID>',
    apiToken: '<secret api token>',
    environment: 'development'
  }]
});
var container = CloudKit.getDefaultContainer();
container.setUpAuth().then(function(userInfo) {
  if(userInfo) {
            console.log(userInfo);
        } else {
            console.log('need to login');
        }
    });
}

Then I get following error How do I authenticate in React with CloudKit JS?

Can you try to run same code outside React? It seems that issue with CloudKit only — iofjuupasli, Apr 16 '16 at 20:19
I want to use CloudKit further into React for data handling. Authentication is just a beginning. Actually async loading of script from CDN is beginning but I have downloaded to script to avoid that issue. — Apoorv Mote, Apr 16 '16 at 20:23

score 4 · Accepted Answer · answered Apr 18 '16 at 18:58

The 421 is expected: basically this is CloudKit JS checking with the server if the user is signed in. You should still see your log statement 'need to login'.

You should also:

Provide dom elements where the signIn / signOut buttons should to be rendered to.
Call container.setUpAuth in componentDidMount instead of componentWillMount (the dom elements for the sign in buttons have to exist when you call this method).

Sample code (https://jsfiddle.net/byb7ha0o/4/):

CloudKit.configure({
  containers: [{
    containerIdentifier: '<container>',
    apiToken: '<token>',
    environment: 'development'
  }]
});
const container = CloudKit.getDefaultContainer();

class HelloCloudKitJS extends React.Component {

  constructor() {
    super();
    this.state = {
        userInfo: null
    }
  }

  componentDidMount() {
    container
      .setUpAuth()
        .then(userInfo => {
        if(userInfo) {
            this.setState({userInfo: userInfo});
          return;
        }
        container
          .whenUserSignsIn()
            .then(userInfo => {
                this.setState({userInfo: userInfo})
          })  
      })
  }

  render() {
    return <div>
      <div>
        <div id="apple-sign-in-button"></div>
        <div id="apple-sign-out-button"></div>
      </div>
    </div>;
  }
}

ReactDOM.render(
  <HelloCloudKitJS />,
  document.getElementById('container')
);

I actually came to this conclusion on my own. Today I came to delete the question. But I would like to give you points instead. Thanks for your help. — Apoorv Mote, Apr 20 '16 at 09:30

How to authenticate CloudKit JS in react JS or React-Redux JS

1 Answers1