Idp select UI #24

dan-f · 2017-08-22T15:30:02Z

This PR introduces a popup-based workflow for logging in to solid IDPs, shielding client applications from redirects.

demo working
tests and refactor
create build scripts for idp select / redirect app
optimize the builds
style the popup app
simplify .env files
remove *.bundle.js from the inlined html bundle directories
add text box for logging in to a "custom" IDP
report errors to the user in the popup

coveralls · 2017-08-27T22:52:57Z

Coverage decreased (-2.1%) to 86.681% when pulling 7952c0d on idp-select-ui into a39c081 on master.

coveralls · 2017-08-28T14:59:30Z

Coverage decreased (-2.1%) to 86.681% when pulling ac8a001 on idp-select-ui into a39c081 on master.

RubenVerborgh · 2017-08-28T18:43:16Z

README.md

+#### Install the dependencies
+
+```sh
+$ npm i


That should probably be Yarn.

RubenVerborgh · 2017-08-28T19:44:11Z

.env.popup.example

@@ -0,0 +1,3 @@
+TRUSTED_APP_NAME="Your App Here"
+TRUSTED_APP_ORIGIN="http://localhost:8080"
+FONT_AWESOME_URL="https://use.fontawesome.com/YOUR-CODE-HERE.js"


I was confused by this. Maybe document or remove?

RubenVerborgh · 2017-08-28T19:44:24Z

README.md

+#### Create and edit your `.env` file
+
+```sh
+$ cp .env.example .env


This file doesn't exist.

RubenVerborgh · 2017-08-28T19:46:18Z

.env.popup.example

@@ -0,0 +1,3 @@
+TRUSTED_APP_NAME="Your App Here"
+TRUSTED_APP_ORIGIN="http://localhost:8080"


Maybe good to use the default Solid testing port 8443 here?

Actually, this is intended to be the origin of the trusted application.

RubenVerborgh · 2017-08-28T19:57:41Z

.env.popup.example

@@ -0,0 +1,3 @@
+TRUSTED_APP_NAME="Your App Here"


Can this file have comments, so I know why all of these are used?

Addressed in the README

RubenVerborgh · 2017-08-29T19:22:07Z

README.md

+### Why might I need this?
+
+If you're building a web app and want to identify users with Solid, or store
+personal information on your user's solid account, you'll have to authenticate


Coming soon...

RubenVerborgh · 2017-08-29T19:23:13Z

README.md

+### How can I use this?
+
+The simplest way to use this library is to install it via `npm` or `yarn`.  You can then use the ES6 module (`import { login, currentUser, logout } from 'solid-auth-client'`), or you can grab the transpiled UMD bundle from `node_modules/solid-auth-client/dist-lib/solid-auth-client.bundle.js`.
+
 ## API


Takes a bit of time here until we get to the meat. Could it make sense to put the types at the end?

RubenVerborgh · 2017-08-29T19:23:52Z

README.md

+- CALLBACK_URI: URI for the popup-based callback app.  When testing locally,
+  this will be something like 'http://localhost:XXXX/idp-callback.html'
+
+### Building the popup app


Perhaps explain why I would want to do this?

Maybe "app" is a bit confusing, in the sense that "demo app" and "popup app" mean different things. The popup is a mandatory component, the demo is just an external app.

And the title is about building, but we are actually running it.

RubenVerborgh · 2017-08-29T19:24:08Z

README.md

+$ yarn test:dev # just run the tests in watch mode
+```
+
+### Building the demo app


Shouldn't the popup come first?

Yeah, this is addressed now, I hope.

RubenVerborgh · 2017-08-29T19:25:02Z

README.md

@@ -3,17 +3,30 @@
 [![Build Status](https://travis-ci.org/solid/solid-auth-client.svg?branch=master)](https://travis-ci.org/solid/solid-auth-client)
 [![Coverage Status](https://coveralls.io/repos/github/solid/solid-auth-client/badge.svg?branch=master)](https://coveralls.io/github/solid/solid-auth-client?branch=master)

-Opaquely authenticates solid clients
+Opaquely authenticates [Solid](https://github.com/solid/) clients

 ## About


Very clear!

RubenVerborgh · 2017-08-29T20:03:12Z

.env.demo.example

@@ -0,0 +1,2 @@
+IDP_SELECT_URI=http://localhost:8081/idp-select.html
+CALLBACK_URI=http://localhost:8081/idp-callback.html


How about 8443 as default port (to align with node-solid-server)?

…and https:// too.

RubenVerborgh · 2017-08-29T20:06:51Z

README.md

+
+```sh
+$ cp .env.popup.example .env.popup && $EDITOR .env.popup # configure the popup app
+$ yarn start:popup


I was confused here that this didn't just give me the HTML files I need, but instead starts an app. (I mean, the "start" part is named well, but it's just not what I expect.)

How can I generate the files?

It's also weird that both the popup and demo are started on 8080.

RubenVerborgh · 2017-08-29T20:08:50Z

README.md

+- CALLBACK_URI: URI for the popup-based callback app.  When testing locally,
+  this will be something like 'http://localhost:XXXX/idp-callback.html'
+
+### Building the popup app


And the title is about building, but we are actually running it.

RubenVerborgh · 2017-08-29T20:59:22Z

demo/components/PersonalInfo.js

    const query = `
      @prefix foaf http://xmlns.com/foaf/0.1/
      ${webId} { foaf:name }
    `
-    return fetch('https://databox.me/,query', { method: 'POST', body: query })
-      .then(resp => resp.json())
+    return fetch('https://databox.me/,query', {


Why is it going there? It should just dereference my WebID.

This is using my live twinql query endpoint :) It is dereferencing your webid behind the scenes.

coveralls · 2017-08-30T18:01:28Z

Coverage decreased (-2.8%) to 86.042% when pulling ec5bc22 on idp-select-ui into a0f242e on master.

dan-f · 2017-08-30T18:10:00Z

@RubenVerborgh - here's the final draft. If there's anything else you'd like to see changed, let me know!

coveralls · 2017-09-01T14:42:02Z

Coverage decreased (-3.1%) to 85.773% when pulling c516dc6 on idp-select-ui into a0f242e on master.

coveralls · 2017-09-01T15:26:03Z

Coverage decreased (-3.1%) to 85.773% when pulling c481e50 on idp-select-ui into a0f242e on master.

coveralls · 2017-09-01T20:25:20Z

Coverage decreased (-3.1%) to 85.773% when pulling 8ddea37 on idp-select-ui into a0f242e on master.

coveralls · 2017-09-01T20:35:45Z

Coverage decreased (-3.1%) to 85.773% when pulling 69548ca on idp-select-ui into a0f242e on master.

dan-f added 3 commits August 21, 2017 21:14

Popup flow working. TODO: big refactor

29a5bb1

Add prettier

949cd49

Fix test failures

881a832

RubenVerborgh self-requested a review August 23, 2017 15:00

dan-f added 3 commits August 23, 2017 16:29

Refactor window <-> window communcation

b3d79b5

Use flow-typed for 3rd party lib type defs

f455103

Add ipc spec

4d22b55

dan-f mentioned this pull request Aug 26, 2017

Use Proof of Possession tokens with oidc fetch #21

Merged

Finish tests, docs, build scripts

f0ac52a

dan-f force-pushed the idp-select-ui branch from 4d2a812 to f0ac52a Compare August 27, 2017 17:48

dan-f changed the title ~~[WIP] Idp select UI~~ Idp select UI Aug 27, 2017

dan-f added 5 commits August 27, 2017 14:05

Format README.md

a28a75a

Style idp select UI

ca1be17

Style idp callback UI

e4765cd

Fix eslint error

8b12a4c

Merge branch 'master' into idp-select-ui

7952c0d

Run tests (and prettier) as a pre-commit hook

ac8a001

Correct npm -> yarn in README.md

f6140b4

RubenVerborgh reviewed Aug 28, 2017

View reviewed changes

Add better intro, development docs to README.md

f161c9d

RubenVerborgh reviewed Aug 29, 2017

View reviewed changes

Combine idp-select and idp-callback apps

3c92a7c

RubenVerborgh reviewed Aug 29, 2017

View reviewed changes

dan-f added 2 commits August 29, 2017 18:08

Replace idpSelectUr with popupUri

896b4be

Address review feedback

634c32d

RubenVerborgh mentioned this pull request Aug 29, 2017

Make storage interface asynchronous #23

Closed

Merge branch 'master' into idp-select-ui

ec5bc22

dan-f mentioned this pull request Aug 30, 2017

Use Async Storage API in favor of synchronous mutable storage API anvilresearch/oidc-rp#40

Open

Hack around oidc-rp "session" object

c516dc6

Simplify popup build

c481e50

dan-f added 2 commits September 1, 2017 15:42

fixup! Simplify popup build

678f7a8

Add custom IDP & error UI to popup

8ddea37

Don't worry about demo/popup coverage

69548ca

dan-f merged commit 55c2693 into master Sep 1, 2017

dan-f deleted the idp-select-ui branch September 1, 2017 20:36

dan-f mentioned this pull request Sep 6, 2017

Implement Select Provider popup window capability #18

Closed

dan-f mentioned this pull request Sep 14, 2017

Allow authenticated fetch in a Web Worker #19

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Idp select UI #24

Idp select UI #24

dan-f commented Aug 22, 2017 •

edited

coveralls commented Aug 27, 2017

coveralls commented Aug 28, 2017

RubenVerborgh Aug 28, 2017

RubenVerborgh Aug 28, 2017

RubenVerborgh Aug 28, 2017

RubenVerborgh Aug 28, 2017

dan-f Aug 29, 2017

RubenVerborgh Aug 28, 2017

dan-f Aug 29, 2017

RubenVerborgh Aug 29, 2017

dan-f Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

dan-f Aug 29, 2017

RubenVerborgh Aug 29, 2017

dan-f Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

RubenVerborgh Aug 29, 2017

dan-f Aug 29, 2017 •

edited

coveralls commented Aug 30, 2017

dan-f commented Aug 30, 2017

coveralls commented Sep 1, 2017

coveralls commented Sep 1, 2017

coveralls commented Sep 1, 2017

coveralls commented Sep 1, 2017

		@@ -0,0 +1,3 @@
		TRUSTED_APP_NAME="Your App Here"
		TRUSTED_APP_ORIGIN="http://localhost:8080"

		@@ -0,0 +1,2 @@
		IDP_SELECT_URI=http://localhost:8081/idp-select.html
		CALLBACK_URI=http://localhost:8081/idp-callback.html

Idp select UI #24

Idp select UI #24

Conversation

dan-f commented Aug 22, 2017 • edited

coveralls commented Aug 27, 2017

coveralls commented Aug 28, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dan-f Aug 29, 2017 • edited

Choose a reason for hiding this comment

coveralls commented Aug 30, 2017

dan-f commented Aug 30, 2017

coveralls commented Sep 1, 2017

coveralls commented Sep 1, 2017

coveralls commented Sep 1, 2017

coveralls commented Sep 1, 2017

dan-f commented Aug 22, 2017 •

edited

dan-f Aug 29, 2017 •

edited