Feat: Authentication to Tauri and Web simulator

[ThatDeparted2061]

Implemented the Authentication model for the Desktop and the Vue simulator

Fixes #557

Describe the changes you have made in this PR -

This video is longer than it shud've been so please skip through the video

https://github.com/user-attachments/assets/84463b51-7e4b-40c7-8595-a11cb56f092a

Summary by CodeRabbit

• New Features

  • Introduced an authentication modal for sign-in and registration, allowing users to log in or register without leaving the current page.
  • Added inline error notifications for authentication actions via a snackbar component.
  • Users can toggle between login and registration modes within the modal.

• Improvements

  • Authentication now uses asynchronous API calls with real-time feedback.
  • Sign-out now updates the user state immediately without redirecting.
  • Enhanced user state management with token decoding and automatic session handling.

• Style

  • Updated UI with new modal and form styles for a smoother authentication experience.

[coderabbitai[bot]]

Walkthrough

Refactors the user menu into a right-side drawer with a modal-based authentication flow, client-side validation, async login/signup requests, token handling and sign-out actions in the auth store, moves styles to new SCSS files, adds Tauri HTTP plugin and related config/types, and adds @mdi/js and @tauri-apps/plugin-http dependencies.

Changes

Cohort / File(s)	Change Summary
User menu component src/components/Navbar/User/UserMenu.vue, v0/src/components/Navbar/User/UserMenu.vue, v1/src/components/Navbar/User/UserMenu.vue	Rewrote the component to a right-side navigation drawer with a close button, locale selector, unread notifications badge, and avatar header; introduced a modal-based Sign In / Register flow with reactive refs, client-side validation, async fetch to login/signup endpoints, snackbar feedback, and replaced redirect-based signin/register with authStore.setToken usage and authStore.signOut on logout.
Auth store src/store/authStore.ts, v0/src/store/authStore.ts	Added actions setToken(token: string) to decode JWT payload and populate isLoggedIn, userId, and username (with error handling) and signOut() to reset auth state to defaults.
Stylesheets src/components/Navbar/User/User.scss, v0/src/components/Navbar/User/User.scss, v1/src/components/Navbar/User/User.scss	Added new SCSS files that apply a dark/translucent theme, avatar and list-item styles, locale select overrides, and .auth-modal styling; moved component inline styles into these files.
Package manifest & deps package.json	Added dependencies @mdi/js (^7.4.47) and @tauri-apps/plugin-http (^2.5.2).
Tauri integration src-tauri/Cargo.toml, src-tauri/src/lib.rs, src-tauri/capabilities/default.json, src-tauri/tauri.conf.json	Added tauri-plugin-http dependency and initialized the HTTP plugin in the Tauri builder; added HTTP capability/allowlist entries for auth endpoints; minor formatting change to tauri.conf.json $schema.
Type config tsconfig.json	Added "types": ["vite/client", "@tauri-apps/api/tauri"] to compilerOptions.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• CircuitVerse/cv-frontend-vue#380 — Touches Tauri/desktop integration and may conflict with plugin/config changes in this PR.
• CircuitVerse/cv-frontend-vue#499 — Also modifies Tauri dependencies and initialization; overlaps with Cargo.toml and tauri plugin additions here.

Suggested labels

GSOC'24

Suggested reviewers

• niladrix719
• Arnabdaz

Pre-merge checks (4 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	Most edits are in-scope for implementing authentication (UI, auth store, Tauri plugin/capabilities, types and deps), but the PR also introduces duplicate/parallel files under v0/ and v1/ (duplicated User.scss and UserMenu.vue variants) that appear redundant and outside the stated objectives and a trivial $schema tweak that should be confirmed; these duplicates risk confusion and likely were not intended as part of the auth implementation.	Remove or consolidate the v0/ and v1/ copies so only the canonical src/ component and stylesheet remain, clarify and document any non-auth edits (for example the tauri.conf.json schema change), and run a full build/test to ensure the Tauri plugin and capability additions are necessary and do not introduce regressions before merging.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The current title "Feat: Authentication to Tauri and Web simulator" clearly and concisely states the primary change—adding authentication for both the Tauri desktop and the web simulator—without extraneous detail, so it aligns with the guideline for a focused, single-sentence PR title.
Linked Issues Check	✅ Passed	The changes implement the core coding objectives from the linked issues by adding a modal-based sign-in/register flow, token parsing and signOut in the Pinia auth store, and Tauri-side HTTP plugin and capability entries needed for auth calls, which addresses the main goals of [#557] and provides an initial auth model as requested in [#569]; reviewer comments and PR notes indicate dashboard integration, production API verification, and UI consistency remain outstanding. The implementation is present and testable but uses hardcoded localhost endpoints and has UI concerns flagged by reviewers, so production hardening remains necessary.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

[!TIP]

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b463838637ec897d115eec42411ef194ed87a1c8 and de3ab766b0ab7c7b9c86aed108e49ef83ba22935.

📒 Files selected for processing (1)

• src-tauri/tauri.conf.json (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src-tauri/tauri.conf.json

✨ Finishing touches

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify[bot]]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	1defa914e110470e5602f5c8ddcafb36c2c4a628
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/68c7a44792baf200086518a1
😎 Deploy Preview	https://deploy-preview-554--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 46 (🟢 up 2 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ThatDeparted2061]

@niladrix719 @vedant-jain03

[ThatDeparted2061]

I ll perform some more tests on this, while @aryanndwi123 @Arnabdaz let me know the update on the api changes i need to do

[tachyons]

UI for the sign in model looks weird, use the same UI/UX pattern, do not introduce new colours or other UI elements

[ThatDeparted2061]

UI for the sign in model looks weird, use the same UI/UX pattern, do not introduce new colours or other UI elements

okay

[ThatDeparted2061]

@senbo1 Could you help me out with a better UI here if you have time?