Authentication tutorial #9179

ManoelLobo · 2018-10-17T11:36:56Z

Regarding #8103

Starting the authentication tutorial. (Misc/Making a site with user authentication*)

Mostly setting intro and starting to work into content.

Added to expose to feedback

amberleyromo

I think this is looking pretty good! I would pull over some of the applicable details and links from this section. (Linking to the simple-auth site, the create-client-paths plugin, etc). We can remove that section from the overview page after that.

@shannonbux we'll need to rethink the content for this overview page once the content migration project is finished.

@pieh @DSchau any comments on the content of this page?

ManoelLobo · 2018-10-18T19:16:17Z

Hi, @amberleyromo. Thanks for the response.

I am writing in the style of a tutorial, mainly based on the simple-auth example availabe in the gatsby repo, but simplifying the code a bit (less routes and css styling). Added a few more steps for more feedback.

I added a section "Creating client-only routes" that can be expand to engulf more of the concepts presented in the current section avalaible in the page Building apps with Gatsby. If I understood correctly, that was the suggestion, right?

amberleyromo · 2018-10-18T19:50:47Z

Hey @ManoelLobo -- the idea is to migrate content (#8103). The content is being pulled from a page that's a top-level overview page.

Each overview should give a short overview of its section of the guides and ideally fit “above the fold” (the reader can see the whole guide overview article on desktop without scrolling).

(From the Guide Overview style guide).

So I believe this content should be migrated over to this relevant doc, and once all relevant content is migrated out of that overview doc, it will be edited into a proper overview page.

Let me know if this answers your question?

@shannonbux if you have thoughts/want to chime in?

ManoelLobo · 2018-10-19T11:07:04Z

Ok, @amberleyromo, thanks for the clarification!

I noticed somethingthat may be causing confusion: there is a link under Guides section (Guides - Use cases with Gatsby (including apps) - Building a site with authentication) and another in Advanced Tutorials section (Advanced Tutorials - Making a site with user authentication). I started working on the latter, the tutorial one. Are these duplicates/should be merged/should have different contents?

- PrivateRoutes component - Minor typos fixed

ManoelLobo · 2018-10-22T17:33:23Z

I finished what I call "first complete draft", the main bulk of the tutorial should be here. Waiting for feedback & suggestions!

@shannonbux @amberleyromo

amberleyromo · 2018-10-22T17:35:21Z

Hi @ManoelLobo -- I think my comment didn't get posted, sorry! I thought I replied to this:

I noticed somethingthat may be causing confusion: there is a link under Guides section (Guides - Use cases with Gatsby (including apps) - Building a site with authentication) and another in Advanced Tutorials section (Advanced Tutorials - Making a site with user authentication). I started working on the latter, the tutorial one. Are these duplicates/should be merged/should have different contents?

Very valid point. I will leave this up to @shannonbux for her word on the architecture / whether these were intended to serve two different purposes, or are duplicative.

Thanks for your continued work on this!

Let me know if these don't reflect your original meaning! I just did some minor edits.

shannonbux

@ManoelLobo this looks great from a style perspective! Excellent work on formatting the code snippets 👍

One style change needed before we can merge this: h1 is reserved for the title, so change any h1 headers to h2.

As far as the difference between the tutorial and doc go, they both should be different. The authentication doc should just explain that authentication is possible, explain how it is possible, and show a very short example, then link to example sites, this tutorial, and more information about client-only routes.

Want to write that doc too?

- Corrected section headings - Cleaned code snippets

ManoelLobo · 2018-10-23T13:09:30Z

Hey, @shannonbux, thanks for the review!

I changed the headers as you requested, and made small fixes that I found myself.

Want to write that doc too?

Sure! I should open a PR in the next hours. Should I ping you/mention any specific issue?

- Checking if the window global exists befor using it

shannonbux

Ah, yes, one more request:

Add these example sites to the bottom of the tutorial under further reading:

Next, @DSchau will give this a technical review!

DSchau

This looks great. I left a few comments, most of them are mere nits rather than substantive!

I haven't seen the approach with PrivateRoute and the @reach/router Router component directly, but it seems to work fairly well.

I solved this problem with a custom Layout component that handles authentication (with React context), and whitelisted routes that don't require it, but I think both solutions work pretty well.

Thanks for the PR!

If you're interested, my approach is here:

DSchau · 2018-10-23T17:05:19Z

docs/docs/authentication-tutorial.md

+
+    <nav>
+      <Link to="/">Home</Link>
+      {` `}


nit: but these spaces should probably just be removed. I think it's an artifact from prettier, but a hard line break should work here instead of spacing!

Actually, they are there on purpose. The minification process removes any whitespace preceeded by a newline, so all the links stay side by side (<a>...</a><a>...</a>), and end up rendering as one big word (Home Profile Logout) - the links would work normally, but visually they wolud look like one.

I could solve this with styling (inline styles or change the global css file), but thought it could be more code than needed to explain the tutorial (or maybe I'm a lazy typist 😆 )

Opinions?

docs/docs/authentication-tutorial.md

DSchau · 2018-10-23T17:11:08Z

docs/docs/authentication-tutorial.md

+
+      <nav>
+        <Link to="/">Home</Link>
+        {` `}


Same here with the spaces!

ManoelLobo · 2018-10-24T11:56:08Z

@shannonbux links added 👍

@DSchau thanks for the review!
About your solution, it reminds me of some frameworks that set security/routes in config files, like PHP's Symfony. Pretty nice!

shannonbux

Looks awesome!

gatsbot · 2018-10-24T22:47:21Z

Holy buckets, @ManoelLobo — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

@shannonbux

Regarding gatsbyjs#8103 Starting the authentication tutorial. (Misc/Making a site with user authentication*) Mostly setting intro and starting to work into content. cc @shannonbux

@shannonbux

Regarding gatsbyjs#8103 Starting the authentication tutorial. (Misc/Making a site with user authentication*) Mostly setting intro and starting to work into content. cc @shannonbux

ManoelLobo requested a review from a team October 17, 2018 11:36

Starting Authentication tutorial

c1db8eb

ManoelLobo force-pushed the docs/authentication-tutorial branch from 0d9e8dc to c1db8eb Compare October 17, 2018 13:43

WIP: First sections of tutorial

f612e04

Added to expose to feedback

ManoelLobo force-pushed the docs/authentication-tutorial branch 2 times, most recently from 151d8a8 to f612e04 Compare October 17, 2018 18:17

amberleyromo reviewed Oct 18, 2018

View reviewed changes

shannonbux mentioned this pull request Oct 18, 2018

Content migration overview issue #8103

Closed

51 tasks

WIP: Added initial setup & introduced some concepts

6ceecf6

WIP: Private routes

948e06c

- PrivateRoutes component - Minor typos fixed

ManoelLobo force-pushed the docs/authentication-tutorial branch from 8532e96 to 948e06c Compare October 19, 2018 14:27

First full draft

ddcd53c

ManoelLobo force-pushed the docs/authentication-tutorial branch from 25b2215 to ddcd53c Compare October 22, 2018 18:10

shannonbux added 3 commits October 22, 2018 16:49

A few wording changes

7ff7c12

Let me know if these don't reflect your original meaning! I just did some minor edits.

one missing letter

1a8725f

two punctuation edits

5fc79aa

shannonbux suggested changes Oct 22, 2018

View reviewed changes

Revision - after feedback

5dd4298

- Corrected section headings - Cleaned code snippets

Fixed code snippet

39920ad

- Checking if the window global exists befor using it

shannonbux suggested changes Oct 23, 2018

View reviewed changes

shannonbux assigned DSchau Oct 23, 2018

DSchau approved these changes Oct 23, 2018

View reviewed changes

ManoelLobo added 2 commits October 24, 2018 07:41

Better intro to files and changes

61ecd88

Use localStorage API methods instead of change properties directly

49a73e0

ManoelLobo added 2 commits October 24, 2018 08:15

Fixed login component - missing code

179c0ce

More references for further reading

e67157c

Fixed lines changed - highlight

2ed4e2b

shannonbux approved these changes Oct 24, 2018

View reviewed changes

shannonbux merged commit 23bda33 into gatsbyjs:master Oct 24, 2018

ManoelLobo mentioned this pull request Oct 25, 2018

Authentication guide (Build a site with authentication) #9405

Merged

ManoelLobo deleted the docs/authentication-tutorial branch November 6, 2018 10:41

Authentication tutorial #9179

Authentication tutorial #9179

Uh oh!

Conversation

ManoelLobo commented Oct 17, 2018

Uh oh!

amberleyromo left a comment

Choose a reason for hiding this comment

Uh oh!

ManoelLobo commented Oct 18, 2018

Uh oh!

amberleyromo commented Oct 18, 2018

Uh oh!

ManoelLobo commented Oct 19, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ManoelLobo commented Oct 22, 2018

Uh oh!

amberleyromo commented Oct 22, 2018

Uh oh!

shannonbux left a comment

Choose a reason for hiding this comment

Uh oh!

ManoelLobo commented Oct 23, 2018

Uh oh!

shannonbux left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DSchau left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DSchau Oct 23, 2018

Choose a reason for hiding this comment

Uh oh!

ManoelLobo Oct 24, 2018

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DSchau Oct 23, 2018

Choose a reason for hiding this comment

Uh oh!

ManoelLobo Oct 24, 2018

Choose a reason for hiding this comment

Uh oh!

ManoelLobo commented Oct 24, 2018

Uh oh!

shannonbux left a comment

Choose a reason for hiding this comment

Uh oh!

gatsbot bot commented Oct 24, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ManoelLobo commented Oct 19, 2018 •

edited

Loading

shannonbux left a comment •

edited

Loading

DSchau left a comment •

edited

Loading