+
+## Features 📋
+
+- Supabase setup
+- Stencil Store setup
+- Login / Register / Logout functionality (Basic one)
+- Protecting routes (router-guard) that are accessed after login
+
+## Getting Started 🚀
+
+To start using this boilerplate, clone this repo to a new directory:
+
+```sh
+git clone https://github.com/ftonato/stencil-supabase.git
+```
+
+and run:
+
+```sh
+npm install
+```
+
+## Usage 🚊
+
+Setup Supabase configuration
+
+Please setup _Supabase_ configuration in the file
+
+```
+src -> config -> config.ts
+```
+
+```js
+const supabaseConfig = {
+ supabaseUrl: '',
+ supabaseKey: ''
+};
+```
+
+You can find more about _Supabase Client_ config [on the official documentation page](https://supabase.io/docs/client/initializing).
+
+To start a project, run:
+```sh
+npm run start
+```
+
+To build the app for production, run:
+
+```sh
+npm run build
+```
+
+To run the unit tests once, run:
+
+```sh
+npm run test
+```
+
+To run the unit tests and watch for file changes during development, run:
+
+```sh
+npm run test.watch
+```
+
+## Project structure 🗄️
+
+You can check the details of the [structure of our project through this file](./STRUCTURE.md)
+
+## Contributing 👏
+- [Pull requests](https://github.com/ftonato/stencil-supabase/pulls) and 🌟 stars are always welcome.
+
+## License
+[MIT ©](LICENSE)
diff --git a/examples/with-stencil/STRUCTURE.md b/examples/with-stencil/STRUCTURE.md
new file mode 100644
index 00000000000..fd06b4edbb7
--- /dev/null
+++ b/examples/with-stencil/STRUCTURE.md
@@ -0,0 +1,51 @@
+## Project structure 🗄️
+
+### Service
+This class will handle application authenticate features to supabase.
+
+```
+src -> services -> auth.service.ts -> Class SupabaseAuthService
+```
+You can create more classes to group a functionality.
+
+### Store
+Application store
+```
+src -> store -> app.store.ts
+```
+
+### Interfaces
+Interfaces used in the application
+```
+src -> interface -> interface.ts
+```
+### Utility
+Utility for parsing application messages and holding form configurations
+```
+src -> util -> util.ts
+```
+### Configuration
+Application level configurations
+```
+src -> config -> config.ts
+```
+### Assets
+Application level assets
+```
+src -> assets
+```
+### Components
+Application level components
+
+```
+src -> components ->
+1.
+ {this.closable && ( this.hideMessage()}>×)}
+
+ );
+ }
+}
diff --git a/examples/with-stencil/src/components/app-home/app-home.e2e.ts b/examples/with-stencil/src/components/app-home/app-home.e2e.ts
new file mode 100644
index 00000000000..c6a6369ab99
--- /dev/null
+++ b/examples/with-stencil/src/components/app-home/app-home.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-home', () => {
+ it('renders', async () => {
+ const page = await newE2EPage();
+ await page.setContent('
+
+
+
+
+
+ +
+ Welcome to the Stencil & Supabase dashboard
+ +
+ 
+
+
+
+ Hi{' '} + + {AppState.user ? AppState.user.email : null} + , +
+ +Welcome to the {appConfig.name} dashboard.
+
+ This app demonstrate Login, Register, Logout features using Supabase + Stencil + Stencil Store as state management tool.
+ You can read more about the technologies used here: Stencil{', '} + Stencil Store{', and '} + Supabase.
++ +
+ Created by: Ademílson F. Tonato - @ftonato. +
+ +Loading...
);
+ }
+ if (AppState.appInitError != '') {
+ return (
+ {
+ AppState.isAuthenticated &&
+
+ {
+ AppState.user
+ && (
+
+ }
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/examples/with-stencil/src/components/auth/login/app-auth-login.e2e.ts b/examples/with-stencil/src/components/auth/login/app-auth-login.e2e.ts
new file mode 100644
index 00000000000..6c023237d05
--- /dev/null
+++ b/examples/with-stencil/src/components/auth/login/app-auth-login.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-auth-login', () => {
+ it('renders', async () => {
+ const page = await newE2EPage();
+ await page.setContent('
+
+ Welcome {' ' + AppState.user.email + ' '}
+
+ this.logout()}>
+ Logout
+
+
+ )
+ }
+
+
+
+
+
+ Don't have an account? Register
+
+
+ {this.loginError} }
+
+
+ Welcome to Stencil & Supabase starter App
++ Insert your auth data to navigate through the app +
+ + + {this.loginError &&Or sign in with
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Do you have an account? Login
+
+
+ {this.registerError} }
+
+ Welcome to Stencil & Supabase starter App
++ Insert your profile data to be able to navigate through the app +
+ + + {this.registerError &&
+
+
+
+
+ Page not found ~ 404
+The page you are requested is not found.
+