Commit f42f8ae6 authored by Vincent's avatar Vincent

Adding basic authentication functionality

To be able to write to a person's Pod, they need to log in and
authorise our app. To do this, we use the React components in
https://www.npmjs.com/package/@solid/react.

Although it unfortunately comes with a bunch of stuff we will not
be using, the authentication components are easy enough to use:
wrap components that should be visible to people who are not
logged in inside a <LoggedOut> component, and those that should
only be visible to those who are logged in inside a <LoggedIn>.

Actual authentication is initiated with a <LoginButton>.
Unfortunately, at this time this involves including an HTML blob
verbatim as downloaded from
https://solid.github.io/solid-auth-client/dist/popup.html
(this is linked to from the README of @solid/react). In the future,
this will hopefully be properly packaged.
parent 6ab33377
This diff is collapsed.
......@@ -3,10 +3,12 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@solid/react": "^1.6.0",
"@types/jest": "24.0.15",
"@types/node": "12.6.6",
"@types/react": "16.8.23",
"@types/react-dom": "16.8.4",
"@types/solid__react": "^1.6.1",
"bulma": "^0.7.5",
"node-sass": "^4.12.0",
"react": "^16.8.6",
......
This source diff could not be displayed because it is too large. You can view the blob instead.
import React from 'react';
import { LoggedOut, LoginButton, LoggedIn } from '@solid/react';
import { Dashboard } from './components/Dashboard';
const App: React.FC = () => {
return (
return <>
<React.StrictMode>
<p>This is a basic app that can use <a href="https://bulma.io/" title="The Bulma CSS framework">Bulma</a> for styling.</p>
<LoggedOut>
<section className="section">
<p className="content">Please connect to your Pod to start taking notes.</p>
<p className="content">
<LoginButton popup="popup.html" className="button is-large is-primary">Connect</LoginButton>
</p>
</section>
</LoggedOut>
<LoggedIn>
<Dashboard/>
</LoggedIn>
</React.StrictMode>
);
</>;
}
export default App;
import React from 'react';
import { LogoutButton } from '@solid/react';
export const Dashboard: React.FC = () => {
return <>
<section className="section">You are logged in! You will be able to do things here.</section>
<footer className="footer has-text-right">
<LogoutButton className="button"/>
</footer>
</>;
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment