Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SolidJS-Tailwind] Implement authentication #734

Merged
merged 15 commits into from
Nov 17, 2022
Merged

Conversation

mbicknese
Copy link
Contributor

@mbicknese mbicknese commented Oct 27, 2022

Implements: #693

@aws-amplify-us-east-1
Copy link

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-734.dbm2zhgk5abrj.amplifyapp.com

@aws-amplify-us-east-1
Copy link

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-734.d3sqkonra6x7y9.amplifyapp.com

@mbicknese
Copy link
Contributor Author

I'm hesitant about the bailing mechanism, trying to figure out if there's a more native way.

resolve: {
conditions: ['development', 'browser'],
alias: {
'node-fetch': 'isomorphic-fetch',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this makes octokit work in the browser

@mbicknese mbicknese linked an issue Oct 28, 2022 that may be closed by this pull request
6 tasks
}

setAuth({ token: token() });
navigate(sessionStorage.getItem('auth_return_path'));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what happens if auth_return_path undefined and i am not sure what's happening here after token is stored.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't hurt to implement a fallback, I'll add it 👍

The trick is to return the user to where they came from before going through the authentication loop.

const location = useLocation();

if (!authStore.isAuthenticated) {
sessionStorage.setItem('auth_return_path', location.pathname);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WHat's happening here? Why do we need to do this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way we know where we came from on Signin.jsx:22 . It helps us to return the user to their origin.

@@ -0,0 +1,6 @@
const ROUTES = {
HOME: '/',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can make this like so also in other to distinguish auth required pages from others

HOME: {
path: '/',
requiresAuth: true,
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using Home as example.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My idea was to split pages and routes. The page knows whether it needs authentication or not, the route is just the pointer to that page.
Maybe PATHS is a better name for this constant?

@mbicknese mbicknese marked this pull request as ready for review October 28, 2022 11:43
@mbicknese
Copy link
Contributor Author

#744 should be done at some point, cleaning up some of the mess created here.

import { useNavigate } from '@solidjs/router';

const fetchToken = () =>
fetch('http://localhost:4000/api/auth/token', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you make this an ebvironment variable, other showcases do it that way http://api.starter.dev/api/

<main class="absolute bg-black text-gray-500 w-full h-full m-0 p-0 table">
<form class="p-64 block mx-auto mb-2">
<a
href="http://localhost:4000/api/auth/signin?redirect_url=http%3A%2F%2Flocalhost%3A3000"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same, env variable

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how did we get this? http%3A%2F%2Flocalhost%3A3000

.rest.users.getAuthenticated()
.then((response) => response.data);
} catch {
return Promise.resolve({});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Promise.resolve or Promise.reject?

lindakatcodes and others added 7 commits November 16, 2022 20:39
* setup: get branch caught up and ready for work

* feat: refactored repository service and test

* feat: refactor of user service and test

* feat: updated user service spec

* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls

* attempt to fix issues with service updates; some refactoring and adjusting so app compiles

* feat: added auth user data to auth state; updated nav component to use auth state

* feat: adjusted auth call; fixed user call so home page loads

* moved some user logic; still having reload issues and repo view issues

* feat: got app working again! cleaned out console logs

* rebased and fixed most files

* fix broken tests

* removed unused code

* fix: fix pr comments and most tests

* fix: fixed final broken unit test

* fix: updated test; removed unused code in user effect; new user mapping file

* add todo for refactor improvements; update authUser effect to use different rxjs operation

Co-authored-by: LindaT <[email protected]>
#637)

* fix(angular-apollo-tailwind): append protocol if missing from user url

Refs: #591

* test(angular-apollo-tailwind): update with testcases

Closes: #591
* chore: repo card with story and test

* fix comments

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>
* chore: gist panel UI

* fix coment

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>
vyktoremario
vyktoremario previously approved these changes Nov 17, 2022
@hdJerry hdJerry merged commit 6f21c5c into main Nov 17, 2022
@hdJerry hdJerry deleted the solidjs/create-login-page branch November 17, 2022 12:44
hdJerry added a commit that referenced this pull request Nov 17, 2022
* chore(solidjs): remove example components

* feat(solidjs): add signin page

* refactor(solidjs): improve auth setup

* feat(solidjs): pencil in auth flow

* feat(solidjs): add example github communication

* [Angular - NgRx - SCSS] 440: state & service refactor (#527)

* setup: get branch caught up and ready for work

* feat: refactored repository service and test

* feat: refactor of user service and test

* feat: updated user service spec

* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls

* attempt to fix issues with service updates; some refactoring and adjusting so app compiles

* feat: added auth user data to auth state; updated nav component to use auth state

* feat: adjusted auth call; fixed user call so home page loads

* moved some user logic; still having reload issues and repo view issues

* feat: got app working again! cleaned out console logs

* rebased and fixed most files

* fix broken tests

* removed unused code

* fix: fix pr comments and most tests

* fix: fixed final broken unit test

* fix: updated test; removed unused code in user effect; new user mapping file

* add todo for refactor improvements; update authUser effect to use different rxjs operation

Co-authored-by: LindaT <[email protected]>

* feat(solidjs) - Create navigation header (#840)

* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)

* fix(angular-apollo-tailwind): append protocol if missing from user url

Refs: #591

* test(angular-apollo-tailwind): update with testcases

Closes: #591

* chore: repo card with story and test (#737)

* chore: repo card with story and test

* fix comments

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: gist panel UI (#741)

* chore: gist panel UI

* fix coment

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore(solidjs): remove example components

* fixed comments, clean ups

Co-authored-by: Linda Thompson <[email protected]>
Co-authored-by: LindaT <[email protected]>
Co-authored-by: Daian Scuarissi <[email protected]>
Co-authored-by: Oluwakorede Cole <[email protected]>
Co-authored-by: Jerry Hogan <[email protected]>
Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>
hdJerry added a commit that referenced this pull request Nov 17, 2022
* chore(solidjs): remove example components

* feat(solidjs): add signin page

* refactor(solidjs): improve auth setup

* feat(solidjs): pencil in auth flow

* feat(solidjs): add example github communication

* [Angular - NgRx - SCSS] 440: state & service refactor (#527)

* setup: get branch caught up and ready for work

* feat: refactored repository service and test

* feat: refactor of user service and test

* feat: updated user service spec

* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls

* attempt to fix issues with service updates; some refactoring and adjusting so app compiles

* feat: added auth user data to auth state; updated nav component to use auth state

* feat: adjusted auth call; fixed user call so home page loads

* moved some user logic; still having reload issues and repo view issues

* feat: got app working again! cleaned out console logs

* rebased and fixed most files

* fix broken tests

* removed unused code

* fix: fix pr comments and most tests

* fix: fixed final broken unit test

* fix: updated test; removed unused code in user effect; new user mapping file

* add todo for refactor improvements; update authUser effect to use different rxjs operation

Co-authored-by: LindaT <[email protected]>

* feat(solidjs) - Create navigation header (#840)

* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)

* fix(angular-apollo-tailwind): append protocol if missing from user url

Refs: #591

* test(angular-apollo-tailwind): update with testcases

Closes: #591

* chore: repo card with story and test (#737)

* chore: repo card with story and test

* fix comments

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: gist panel UI (#741)

* chore: gist panel UI

* fix coment

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore(solidjs): remove example components

* fixed comments, clean ups

Co-authored-by: Linda Thompson <[email protected]>
Co-authored-by: LindaT <[email protected]>
Co-authored-by: Daian Scuarissi <[email protected]>
Co-authored-by: Oluwakorede Cole <[email protected]>
Co-authored-by: Jerry Hogan <[email protected]>
Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>
hdJerry added a commit that referenced this pull request Nov 17, 2022
* in progress

* chore: get all repos api

* [Angular - NgRx - SCSS] 440: state & service refactor (#527)

* setup: get branch caught up and ready for work

* feat: refactored repository service and test

* feat: refactor of user service and test

* feat: updated user service spec

* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls

* attempt to fix issues with service updates; some refactoring and adjusting so app compiles

* feat: added auth user data to auth state; updated nav component to use auth state

* feat: adjusted auth call; fixed user call so home page loads

* moved some user logic; still having reload issues and repo view issues

* feat: got app working again! cleaned out console logs

* rebased and fixed most files

* fix broken tests

* removed unused code

* fix: fix pr comments and most tests

* fix: fixed final broken unit test

* fix: updated test; removed unused code in user effect; new user mapping file

* add todo for refactor improvements; update authUser effect to use different rxjs operation

Co-authored-by: LindaT <[email protected]>

* feat(solidjs) - Create navigation header (#840)

* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)

* fix(angular-apollo-tailwind): append protocol if missing from user url

Refs: #591

* test(angular-apollo-tailwind): update with testcases

Closes: #591

* chore: repo card with story and test (#737)

* chore: repo card with story and test

* fix comments

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: gist panel UI (#741)

* chore: gist panel UI

* fix coment

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* [solidjs-pod] : Create component for search input and filter sort buttons (#831)

* in progress

* in progress

* in progress, paused for now

* chore: search filter sort component

* fixed comments on icons

* [solidjs-tailwinf] Add user profile card (#830)

* [SolidJS-Tailwind] Implement authentication (#734)

* chore(solidjs): remove example components

* feat(solidjs): add signin page

* refactor(solidjs): improve auth setup

* feat(solidjs): pencil in auth flow

* feat(solidjs): add example github communication

* [Angular - NgRx - SCSS] 440: state & service refactor (#527)

* setup: get branch caught up and ready for work

* feat: refactored repository service and test

* feat: refactor of user service and test

* feat: updated user service spec

* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls

* attempt to fix issues with service updates; some refactoring and adjusting so app compiles

* feat: added auth user data to auth state; updated nav component to use auth state

* feat: adjusted auth call; fixed user call so home page loads

* moved some user logic; still having reload issues and repo view issues

* feat: got app working again! cleaned out console logs

* rebased and fixed most files

* fix broken tests

* removed unused code

* fix: fix pr comments and most tests

* fix: fixed final broken unit test

* fix: updated test; removed unused code in user effect; new user mapping file

* add todo for refactor improvements; update authUser effect to use different rxjs operation

Co-authored-by: LindaT <[email protected]>

* feat(solidjs) - Create navigation header (#840)

* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)

* fix(angular-apollo-tailwind): append protocol if missing from user url

Refs: #591

* test(angular-apollo-tailwind): update with testcases

Closes: #591

* chore: repo card with story and test (#737)

* chore: repo card with story and test

* fix comments

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: gist panel UI (#741)

* chore: gist panel UI

* fix coment

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore(solidjs): remove example components

* fixed comments, clean ups

Co-authored-by: Linda Thompson <[email protected]>
Co-authored-by: LindaT <[email protected]>
Co-authored-by: Daian Scuarissi <[email protected]>
Co-authored-by: Oluwakorede Cole <[email protected]>
Co-authored-by: Jerry Hogan <[email protected]>
Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: updated amplify.yml file (#729)

* chore: updated amplify.yml file

* changed pnpm to npm

* chore: workflow added (#745)

* chore: workflow added

* CI setup fixes and testing

* CI setup fixes and testing

* CI setup fixes and testing

* tried everything but doesn't work, i think we have to merge this

* auth token added to header

* ..updates

* ..updates

* auth token added to header

* fix file issues

* CI adjustments

* CI adjustments

Co-authored-by: Linda Thompson <[email protected]>
Co-authored-by: LindaT <[email protected]>
Co-authored-by: Daian Scuarissi <[email protected]>
Co-authored-by: Oluwakorede Cole <[email protected]>
Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>
Co-authored-by: Maarten Bicknese <[email protected]>
hdJerry added a commit that referenced this pull request Nov 18, 2022
* chore: get gists api

* updated gists api function

* [Angular - NgRx - SCSS] 440: state & service refactor (#527)

* setup: get branch caught up and ready for work

* feat: refactored repository service and test

* feat: refactor of user service and test

* feat: updated user service spec

* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls

* attempt to fix issues with service updates; some refactoring and adjusting so app compiles

* feat: added auth user data to auth state; updated nav component to use auth state

* feat: adjusted auth call; fixed user call so home page loads

* moved some user logic; still having reload issues and repo view issues

* feat: got app working again! cleaned out console logs

* rebased and fixed most files

* fix broken tests

* removed unused code

* fix: fix pr comments and most tests

* fix: fixed final broken unit test

* fix: updated test; removed unused code in user effect; new user mapping file

* add todo for refactor improvements; update authUser effect to use different rxjs operation

Co-authored-by: LindaT <[email protected]>

* feat(solidjs) - Create navigation header (#840)

* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)

* fix(angular-apollo-tailwind): append protocol if missing from user url

Refs: #591

* test(angular-apollo-tailwind): update with testcases

Closes: #591

* chore: repo card with story and test (#737)

* chore: repo card with story and test

* fix comments

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: gist panel UI (#741)

* chore: gist panel UI

* fix coment

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* [solidjs-pod] : Create component for search input and filter sort buttons (#831)

* in progress

* in progress

* in progress, paused for now

* chore: search filter sort component

* fixed comments on icons

* [solidjs-tailwinf] Add user profile card (#830)

* [SolidJS-Tailwind] Implement authentication (#734)

* chore(solidjs): remove example components

* feat(solidjs): add signin page

* refactor(solidjs): improve auth setup

* feat(solidjs): pencil in auth flow

* feat(solidjs): add example github communication

* [Angular - NgRx - SCSS] 440: state & service refactor (#527)

* setup: get branch caught up and ready for work

* feat: refactored repository service and test

* feat: refactor of user service and test

* feat: updated user service spec

* feat: created dashboard store files; updated global state files; renamed RepoState and updated all calls

* attempt to fix issues with service updates; some refactoring and adjusting so app compiles

* feat: added auth user data to auth state; updated nav component to use auth state

* feat: adjusted auth call; fixed user call so home page loads

* moved some user logic; still having reload issues and repo view issues

* feat: got app working again! cleaned out console logs

* rebased and fixed most files

* fix broken tests

* removed unused code

* fix: fix pr comments and most tests

* fix: fixed final broken unit test

* fix: updated test; removed unused code in user effect; new user mapping file

* add todo for refactor improvements; update authUser effect to use different rxjs operation

Co-authored-by: LindaT <[email protected]>

* feat(solidjs) - Create navigation header (#840)

* fix(angular-apollo-tailwind): append protocol if missing from user url (#637)

* fix(angular-apollo-tailwind): append protocol if missing from user url

Refs: #591

* test(angular-apollo-tailwind): update with testcases

Closes: #591

* chore: repo card with story and test (#737)

* chore: repo card with story and test

* fix comments

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: gist panel UI (#741)

* chore: gist panel UI

* fix coment

* fix coment

Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore(solidjs): remove example components

* fixed comments, clean ups

Co-authored-by: Linda Thompson <[email protected]>
Co-authored-by: LindaT <[email protected]>
Co-authored-by: Daian Scuarissi <[email protected]>
Co-authored-by: Oluwakorede Cole <[email protected]>
Co-authored-by: Jerry Hogan <[email protected]>
Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>

* chore: updated amplify.yml file (#729)

* chore: updated amplify.yml file

* changed pnpm to npm

* chore: workflow added (#745)

* chore: workflow added

* CI setup fixes and testing

* CI setup fixes and testing

* CI setup fixes and testing

* tried everything but doesn't work, i think we have to merge this

* ..updates

* ..updates

* ..updates

* added auth token

* added auth token

Co-authored-by: Linda Thompson <[email protected]>
Co-authored-by: LindaT <[email protected]>
Co-authored-by: Daian Scuarissi <[email protected]>
Co-authored-by: Oluwakorede Cole <[email protected]>
Co-authored-by: Victor Chukwuebuka Umeh <[email protected]>
Co-authored-by: Maarten Bicknese <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[solidjs-pod] 03 Create login page
7 participants