User Authorization with Next.js and Apollo

What Happened

I have been working on an esports news submission web application for the last 2 months now (with a hearty break during December, so maybe closer to a month). Recently, I completed the article submission component. I mounted this component through a submit article page on the site. After getting the functionality running I wanted to make it so only users could submit an article. And, rather than having them write out the article to only be denied, I thought "why not let them know upfront you have to be logged in to submit an article?"

I started working through this process. My initial idea was to run a current user query within the component to get access to the current user's id. If this didn't return any data then I would know that the user was not logged in. After writing this up I could not find a way to encapsulate the submission Mutation within a user Query. After trying a few different methods everyone returned errors. Taking a step back I saw a solution.

The Solution

Taking that step back I saw a solution on the Next.js page that is used to mount the article submission component. By utilizing the <User> component, I could wrap the <Submit> component within the <User> component's returned data. For further clarity, here is the full <User> component:

import { Query } from "react-apollo"; import gql from "graphql-tag"; import PropTypes from "prop-types"; const CURRENT_USER_QUERY = gql` query { me { id email name permissions } } `; const User = props => ( <Query {...props} query={CURRENT_USER_QUERY}> {payload => props.children(payload)} </Query> ); User.propTypes = { children: PropTypes.func.isRequired }; export default User; export { CURRENT_USER_QUERY }; 

So, if we take that payload returned from the component we can pass this to the <Submit> component via a prop. Taking this approach we can change our submit.js page from

import React, { Component } from "react"; import Submit from "../components/Submit"; const submit = () => <Submit />; export default submit; 

To something that will gather data from the <User> component.

import React, { Component } from "react"; import { Query } from "react-apollo"; import Submit from "../components/Submit"; import User from "../components/User"; import Signin from "../components/Signin"; const submit = () => <User>{({ data }) => <Submit isLoggedIn={data} />}</User>; export default submit; 

The payload here is then passed to <Submit> within the isLoggedIn prop. Taking that prop, we can use some if/else statements to either render the submission form or render a login page, depending on what the current user status is.

render() { if (this.props.isLoggedIn.me) { return ( Submission form code here ) } else { login form, message, or redirect here } } 

So, if isLoggedIn.me exists, then the user is logged in. The me part of this comes from the CURRENT_USER_QUERY. The query returns id, email, name, permission. We could use any one of these, including isLoggedIn.me.permission to make sure they are part of a group authorized to access this, but within the web application, any logged-in user is allowed to submit an article.

The Conclusion

This strategy could be utilized for any level of authorization. If this was an admin form I could take the returned data and look for the permission part of the object (this is defined in the query from <User> and stored in the database for each user). This particular time, I only look for any data at all. As long as that data exists, the user is logged in. This is another excellent lesson in always taking a step back in what we are doing. I spent longer on this then I should but it was because I tried so many different iterations of how I thought it was supposed to work, rather than taking a few minutes to review my thought process and take a different approach.

Thank you for reading. As always, feel free to leave any comments about the code, my thought process, what I could be doing better, or just saying hey.