VerificationLink

In this blog post, I’ll be telling on how SUSI-server synchronizes with SUSI accounts front-end and enable users to have a SUSI verified account. Apart from how server processes the query and responds to it, I also discuss the role of SUSI accounts as a client in it.

Beginning with server, at the time of signup, a mail is sent to user’s email id {only is user is not already registered}. This email contains a link, clicking on which a request is sent to server to check if the combination of email id and the access_token  passed matches or not. Let us quickly look at the email and decode it.

http://accounts.susi.ai/verify-account?access_token=hU86imBzXP3hcLgBgN6x4ShLuDopyH&validateEmail=dlochangupta@gmail.com&request_session=true

As you can see, the base URL is http://accounts.susi.ai and the route to which the user is redirected ‘/verify-account’. What does the rest of the parameters do?

• access _token —> access token
• validateEmail —> email id of the user
• request_session —> boolean value to request a session

access_token contains a key which will be valid for 7 days (i.e. 604800 seconds) since the account was registered.

Since signing up and verifying user’s account, both share Signup.java servlet, As a first step, server checks if the request contains ‘validateEmail’ in the parameter list. If yes, AND it is not a null parameter, server is sure that it is a account verification request. Next it proceeds with checking if user has even registered or not. If not, user is notified with error code 400 and error message “Bad request”. Otherwise, by now server has found the client ID already and only steps left are to make “activated” attribute set to true. Once done successfully, server responds with a similar type of JSON response :

{
  "accepted": true,
  "message": "You successfully verified your account!",
  "session": {"identity": {
    "type": "email",
    "name": "test@fossasia.com",
    "anonymous": false
  }}
}

But you did not come across a similar type of JSON response. Did you? Here comes the role of client. If you replace http://accounts.susi.ai/verify-account with http://api.susi.ai/aaa/signup.json in the link you received, you will indeed find this JSON response. Since a user is redirected to http://accounts.susi.ai/verify-account with above mentioned 3 parameters, in componentDidMount() function, list of these parameters is extracted from component props.

componentDidMount() {
    const {
      accessToken, validateEmail, requestSession
    } = this.props;

This list was declared and initialized with some values initially so that if these are not found in the parameter list, client would be able to figure it out.

const urlPropsQueryConfig = {
  accessToken: { type: UrlQueryParamTypes.string, queryParam: 'access_token' },
  requessession: { type: UrlQueryParamTypes.string},
  validateEmail: { type: UrlQueryParamTypes.string },
};

static defaultProps = {
    token: 'null',
    validateEmail: 'null',
    requestSession: false,
  }

Additional Resources

1. Site: npmjs.com on How to extract url query parameters from a link? (official documentation)
2. Site: daveceddia.com on How to make an AJAX call in ReactJS. Blog post by Dave Ceddia