Migrate the default Sample to Vite

.gitignore

@@ -30,7 +30,7 @@ lerna-debug.log
 
 # Environment variables files
 .env
-!samples/asgardeo-react-app/.env
+!samples/asgardeo-vite-app/.env
 !samples/asgardeo-react-ts-app/.env
 .env.local
 .env.development.local

samples/asgardeo-react-app/README.md

@@ -47,7 +47,7 @@ The app should open at [`https://localhost:3000`](https://localhost:3000)
 By default, the development server runs on port `3000`. Incase if you wish to change this to something else, 
 follow the steps below.
 
-1. Update the `PORT` in [.env](.env) file in the app root.
+1. Update the `PORT` in [.env](../asgardeo-vite-app/.env) file in the app root.
 2. Update the `signInRedirectURL` & `signOutRedirectURL` in [src/config.json](./src/config.json)
 3. Go to the Asgardeo Console and navigate to the protocol tab of your application:
     - Update the Authorized Redirect URL.

samples/asgardeo-vite-app/.env

@@ -0,0 +1,4 @@
+PORT=3000
+HOST="localhost"
+DISABLE_DEV_SERVER_HOST_CHECK=false
+HTTPS=true

samples/asgardeo-vite-app/README.md

@@ -0,0 +1,68 @@
+# Asgardeo Auth React SDK Usage Vite Example (Single Page Application)
+
+This sample is developed to demonstrate the basic usage of the Asgardeo Auth React SDK.
+
+## Getting Started
+
+### Prerequisites
+-   `Node.js` (version 10 or above).
+
+### Register an Application
+
+Follow the instructions in the [Try Out the Sample Apps](../../SAMPLE_APPS.md#try-out-the-sample-apps) section to register an application.
+
+Make sure to add `https://localhost:3000` as a Redirect URL and also add it under allowed origins.
+
+### Download the Sample
+
+Download the sample from [here](https://github.com/asgardeo/asgardeo-auth-react-sdk/releases/latest/download/asgardeo-react-app.zip) and extract the zip file.
+
+### Configure the Sample
+
+Update configuration file `src/config.json` with your registered app details.
+
+**Note:** You will only have to paste in the `client ID` generated for the application you registered.
+
+Read more about the SDK configurations [here](../../README.md#authprovider).
+
+```json
+{
+    "clientID": "<ADD_CLIENT_ID_HERE>",
+    "baseUrl": "https://api.asgardeo.io/t/<org_name>",
+    "signInRedirectURL": "https://localhost:3000",
+    "signOutRedirectURL": "https://localhost:3000",
+    "scope": ["profile"]
+}
+```
+
+### Run the Application
+
+```bash
+npm install && npm run dev
+```
+The app should open at [`https://localhost:3000`](https://localhost:3000)
+
+### Change the Application's Development Server Port
+
+By default, the development server runs on port `3000`. Incase if you wish to change this to something else,
+follow the steps below.
+
+1. Update the `PORT` in [.env](.env) file in the app root.
+2. Update the `signInRedirectURL` & `signOutRedirectURL` in [src/config.json](./src/config.json)
+3. Go to the Asgardeo Console and navigate to the protocol tab of your application:
+    - Update the Authorized Redirect URL.
+    - Update the Allowed Origins.
+
+## Contribute
+
+Please read [Contributing to the Code Base](http://wso2.github.io/) for details on our code of conduct, and the process for submitting pull requests to us.
+
+### Reporting Issues
+
+We encourage you to report issues, improvements, and feature requests creating [Github Issues](https://github.com/asgardeo/asgardeo-auth-react-sdk/issues).
+
+Important: And please be advised that security issues must be reported to security@wso2com, not as GitHub issues, in order to reach the proper audience. We strongly advise following the WSO2 Security Vulnerability Reporting Guidelines when reporting the security issues.
+
+## License
+
+This project is licensed under the Apache License 2.0. See the [LICENSE](../../LICENSE) file for details.

samples/asgardeo-vite-app/declarations.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2021, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+declare module "*.json" {
+    const value: any;
+    export default value;
+}
+
+declare module "*.png" {
+    const content: string;
+    export default content;
+}

samples/asgardeo-vite-app/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

samples/asgardeo-vite-app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + Asgardeo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>