Automatic detection of Identity Provider or webID in login screen. Fixes #67.

Author: mvanbrab

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - For logged in users not having a username, the webID is displayed (#133).
+- Automatic detection of Identity Provider or webID in login screen (#67).
 
 ### Fixed
 

README.md

@@ -70,10 +70,10 @@ The static build appears in the `dist` folder.
 
 ## Logging in
 
-Some queries access data sources that are only readable by authenticated users. This requires you to log in. 
+Some queries access data sources that are only readable by authenticated users. This requires you to log in.
 To log in, you need to provide an Identity Provider or a WebID.
 The application will detect which one you use and redirect you to the login page of your Identity Provider.
-If you use your WebID, the first OIDC issuer on your WebID is used when there are multiple.
+If you use your WebID, the first Identity Provider found in the given WebID is used.
 
 ## Configuration file
 

cypress/e2e/log-in.cy.js

@@ -5,15 +5,13 @@ describe("Log in", () => {
     cy.get('[aria-label="Profile"]').click();
     cy.contains('[role="menuitem"]', "Login").click();
 
-    cy.get('input[value="webId"]').click();
-
     cy.get('input[name="idp"]')
       .clear();
     cy.get('input[name="idp"]')
       .type("http://localhost:8080/example2/profile/card#me");
     cy.contains("Login").click();
 
-    cy.contains("No IDP found");
+    cy.contains("Login failed");
   });
 
   it("Log in with invalid WebID document", () => {
@@ -22,15 +20,33 @@ describe("Log in", () => {
     cy.get('[aria-label="Profile"]').click();
     cy.contains('[role="menuitem"]', "Login").click();
 
-    cy.get('input[value="webId"]').click();
-
     cy.get('input[name="idp"]')
       .clear();
     cy.get('input[name="idp"]')
       .type("http://localhost:8080/invalidWebId/profile/card#me");
     cy.contains("Login").click();
 
-    cy.contains("Couldn't query the Identity Provider from the WebID");
+    cy.contains("Login failed");
+  });
+
+  it("Log in with WebID with OIDC issuer", () => {
+    cy.visit("/");
+
+    cy.get('[aria-label="Profile"]').click();
+    cy.contains('[role="menuitem"]', "Login").click();
+
+    cy.get('input[name="idp"]')
+      .clear();
+    cy.get('input[name="idp"]')
+      .type("http://localhost:8080/example/profile/card#me");
+    cy.contains("Login").click();
+
+    cy.get("input#email").type("hello@example.com");
+    cy.get("input#password").type("abc123");
+    cy.contains("button", "Log in").click();
+    cy.contains("button", "Authorize").click();
+
+    cy.url().should("eq", "http://localhost:5173/");
   });
 
   it("Log in with an invalid IDP issuer", () => {
@@ -48,7 +64,7 @@ describe("Log in", () => {
     cy.contains("Login failed");
   });
 
-  it("Log in and execute query on private data, then log out", () => {
+  it("Log in with a valid IDP issuer and execute query on private data, then log out", () => {
     cy.visit("/");
 
     cy.get('[aria-label="Profile"]').click();

src/authenticationProvider/authenticationProvider.js

@@ -12,23 +12,21 @@ import SparqlDataProvider from "./../dataProvider/SparqlDataProvider";
 const queryEngine = new QueryEngine();
 
 export default {
-  login: async function login({ type, value }) {
+  login: async function login({ value }) {
     const session = getDefaultSession();
     let idp;
-    if (type !== "idp") {
-      try {
-        idp = await queryIDPfromWebId(value);
-      } catch (error) {
-        // Nothing to do here, the input `idpOrWebId` might be an IDP already
-        throw new Error("Couldn't query the Identity Provider from the WebID");
-      }
-    }
-    else{
-      idp = value;
+
+    try {
+      // assume it is a WebID
+      idp = await queryIDPfromWebId(value);
+    } catch (error) {
+      // continue anyway, value may be an IDP
     }
 
     if (!idp) {
-      throw new Error("No IDP found");
+      // value couldn't be queried or there was no IDP returned from the query
+      // value can be an IDP
+      idp = value;
     }
 
     try {

src/components/LoginPage/LoginPage.jsx

@@ -10,7 +10,6 @@ import configManager from "../../configManager/configManager";
 function SolidLoginForm() {
   const login = useLogin();
   const notify = useNotify();
-  const [isIdp, setIsIdp] = useState(true);
 
   /**
    * Handling what should happen when the user is trying to log in by pressing the log in button.
@@ -19,7 +18,7 @@ function SolidLoginForm() {
   async function handleLogin(event) {
     event.preventDefault();
     try {
-      await login({ type: isIdp ? "idp" : "webId", value: event.target[2].value });
+      await login({ value: event.target[0].value });
     } catch (error) {
       notify(error.message);
     }
@@ -29,16 +28,6 @@ function SolidLoginForm() {
 
   return (
     <form onSubmit={handleLogin} className="login-form">
-      <div className="login-form-type-selection-box">
-        <label className=".login-form-label">
-          Identity Provider
-        </label>
-        <input type="radio" onChange={() => {setIsIdp(!isIdp)}} name="idpOrWebId" value="idp" defaultChecked="checked"/>
-        <label className=".login-form-label">
-          WebID
-        </label>
-        <input type="radio" onChange={() => {setIsIdp(!isIdp)}} name="idpOrWebId" value="webId" />
-      </div>
       <input
         required
         name="idp"