Skip to content

Added username feature forauthentication #8

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.

Sign up for GitHub

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

Open
Mainak-2006 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added username feature forauthentication #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84f9599
Remove PostHog integration and related configuration from the project
Mainak-2006 May 10, 2026
8cae0ce
Add username feature for authentication in sign-in and sign-up forms
Mainak-2006 May 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions .env.example
View file
Open in desktop

This file was deleted.

90 changes: 44 additions & 46 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<img src="https://img.shields.io/badge/-Express-000000?style=for-the-badge&logo=express&logoColor=white" />
<img src="https://img.shields.io/badge/-MongoDB-47A248?style=for-the-badge&logo=mongodb&logoColor=white" /><br/>
<img src="https://img.shields.io/badge/-Clerk-6C47FF?style=for-the-badge&logo=clerk&logoColor=white" />
<img src="https://img.shields.io/badge/-PostHog-F0AD4E?style=for-the-badge&logo=posthog&logoColor=white" />
<img src="https://img.shields.io/badge/-CodeRabbit-FF5100?style=for-the-badge&logo=coderabbit&logoColor=white" />
</div>

Expand Down Expand Up @@ -52,20 +51,22 @@ If you're getting started and need assistance or face any bugs, join our active
## <a name="tech-stack">⚙️ Tech Stack</a>

### Frontend & Mobile
* **[React Native](https://reactnative.dev/)** is a powerful framework for building native mobile applications using React. It allows for a single codebase to run on both iOS and Android while maintaining the performance and feel of a truly native app.
* **[Expo](https://jsm.dev/nativesub-expo)** is the official framework recommended by the React Native team. It provides a robust set of tools and services—like file-based routing and EAS (Expo Application Services)—that streamline the development, building, and submission process.
* **[TypeScript](https://www.typescriptlang.org/)** is a strongly typed programming language that builds on JavaScript. It provides static typing to catch errors early during development, improving code maintainability across the entire full-stack codebase.
* **[NativeWind](https://www.nativewind.dev/)** allows you to style your React Native applications using **Tailwind CSS**. It brings the efficiency of utility-first CSS to mobile, enabling rapid UI development with a consistent design system.

- **[React Native](https://reactnative.dev/)** is a powerful framework for building native mobile applications using React. It allows for a single codebase to run on both iOS and Android while maintaining the performance and feel of a truly native app.
- **[Expo](https://jsm.dev/nativesub-expo)** is the official framework recommended by the React Native team. It provides a robust set of tools and services—like file-based routing and EAS (Expo Application Services)—that streamline the development, building, and submission process.
- **[TypeScript](https://www.typescriptlang.org/)** is a strongly typed programming language that builds on JavaScript. It provides static typing to catch errors early during development, improving code maintainability across the entire full-stack codebase.
- **[NativeWind](https://www.nativewind.dev/)** allows you to style your React Native applications using **Tailwind CSS**. It brings the efficiency of utility-first CSS to mobile, enabling rapid UI development with a consistent design system.

### Backend & Database
* **[Node.js](https://nodejs.org/)** serves as the cross-platform JavaScript runtime environment that executes the backend service, providing high performance for asynchronous API operations.
* **[Express](https://expressjs.com/)** is a minimal and flexible Node.js web application framework. It serves as the middleware layer for the Recurrly backend, handling routing, API requests, and seamless integration with the database.
* **[MongoDB](https://www.mongodb.com/)** is a NoSQL database used to store user data and subscription details. Its flexible document-based structure is ideal for handling the evolving data needs of a subscription management platform.

- **[Node.js](https://nodejs.org/)** serves as the cross-platform JavaScript runtime environment that executes the backend service, providing high performance for asynchronous API operations.
- **[Express](https://expressjs.com/)** is a minimal and flexible Node.js web application framework. It serves as the middleware layer for the Recurrly backend, handling routing, API requests, and seamless integration with the database.
- **[MongoDB](https://www.mongodb.com/)** is a NoSQL database used to store user data and subscription details. Its flexible document-based structure is ideal for handling the evolving data needs of a subscription management platform.

### Infrastructure & Tools
* **[Clerk](https://jsm.dev/nativesub-clerk)** provides a complete suite of authentication and user management tools. It handles secure sign-ins, session management, and integrates seamlessly with billing workflows.
* **[PostHog](https://jsm.dev/nativesub-posthog)** is an all-in-one platform for product analytics. It helps track user behavior, feature usage, and conversion rates, giving you the data needed to improve the app based on real-world usage.
* **[CodeRabbit](https://jsm.dev/nativesub-coderabbit)** is an AI-powered code review assistant. It provides deep, context-aware feedback on pull requests, helping maintain high code quality and catching potential bugs before they reach production.

- **[Clerk](https://jsm.dev/nativesub-clerk)** provides a complete suite of authentication and user management tools. It handles secure sign-ins, session management, and integrates seamlessly with billing workflows.
- **[CodeRabbit](https://jsm.dev/nativesub-coderabbit)** is an AI-powered code review assistant. It provides deep, context-aware feedback on pull requests, helping maintain high code quality and catching potential bugs before they reach production.

## <a name="features">🔋 Features</a>

Expand All @@ -85,8 +86,6 @@ If you're getting started and need assistance or face any bugs, join our active

👉 **Monetization Ready**: Integrated billing and payment flows, allowing you to transition from a free tool to a paid service with professional-grade infrastructure.

👉 **Production-Grade Analytics**: Real-time insights into user behavior and app performance via PostHog, ensuring every feature is optimized for the best user experience.

And many more, including code architecture and reusability.

## <a name="quick-start">🤸 Quick Start</a>
Expand All @@ -110,63 +109,62 @@ cd react-native-recurrly

## Installation

Before you begin developing your app, it's essential to set up Expo and initialize your project.
- Start by creating a folder for your application. Then, open your terminal and navigate to that folder. To create an Expo app, you can use:
Before you begin developing your app, it's essential to set up Expo and initialize your project.

```bash
npx create-expo-app@latest
```
- Start by creating a folder for your application. Then, open your terminal and navigate to that folder. To create an Expo app, you can use:

By default, you get a TypeScript Expo app with Expo Router configured.
```bash
npx create-expo-app@latest
```

If you want a different starter (blank JS, blank TS, tabs, etc.), you can run:
By default, you get a TypeScript Expo app with Expo Router configured.

```bash
npx create-expo-app@latest --template
```
If you want a different starter (blank JS, blank TS, tabs, etc.), you can run:

And pick whichever template fits your workflow.
```bash
npx create-expo-app@latest --template
```

And pick whichever template fits your workflow.

Since this repository is already created, install dependencies and start the development server:
Comment on lines +112 to +130

@coderabbitai coderabbitai Bot May 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Clarify installation instructions for cloned repository.

The Quick Start section includes generic npx create-expo-app instructions, but then states "Since this repository is already created, install dependencies..." This is confusing for users who have already cloned the repo in the previous step. Consider removing lines 114-128 or clearly separating "Creating a new Expo app from scratch" vs. "Using this cloned repository" workflows.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` around lines 112 - 130, Update the Quick Start section in README
to separate two clear workflows: "Create a new Expo app from scratch" (show the
npx create-expo-app and --template examples) and a distinct "Using this cloned
repository" subsection that explains to run npm/yarn/pnpm install and start the
dev server; remove or reword the confusing sentence that mixes both flows and
ensure each subsection has its own header and the appropriate commands so users
who cloned the repo are not shown the create-app steps as the next action.


Since this repository is already created, install dependencies and start the development server:
```bash
npm install
npx expo start
```

```bash
npm install
npx expo start
```
`npx expo start` means "download (if needed) and execute Expo locally." It starts Metro Bundler, which compiles and serves your React Native code.

`npx expo start` means "download (if needed) and execute Expo locally." It starts Metro Bundler, which compiles and serves your React Native code.
Once it starts, you'll see a QR code and shortcut keys in the terminal. For example:

Once it starts, you'll see a QR code and shortcut keys in the terminal. For example:
- `a` opens Android
- `i` opens iOS Simulator (macOS)
- `w` opens web
- `r` reloads
- `m` opens dev menu in Expo Go / device context
- `a` opens Android
- `i` opens iOS Simulator (macOS)
- `w` opens web
- `r` reloads
- `m` opens dev menu in Expo Go / device context

We don't need to rely on heavy IDE tooling to begin. The easiest flow is using Expo Go on your phone.
We don't need to rely on heavy IDE tooling to begin. The easiest flow is using Expo Go on your phone.

Expo Go is a mobile app that lets you test React Native apps quickly by scanning a QR code. It's fast, beginner-friendly, and supports real-time updates while you code.
Expo Go is a mobile app that lets you test React Native apps quickly by scanning a QR code. It's fast, beginner-friendly, and supports real-time updates while you code.

Open Google Play Store or Apple App Store, install **Expo Go**, then come back here and scan the QR code.
Open Google Play Store or Apple App Store, install **Expo Go**, then come back here and scan the QR code.

### iOS VPN Turn OFF, and network permissions…
### iOS VPN Turn OFF, and network permissions…

Now open Expo Go and scan the QR code from the terminal. The app should compile and launch.
Now open Expo Go and scan the QR code from the terminal. The app should compile and launch.

If all is good, you'll see the starter app with two tabs: Home and Explore.
If all is good, you'll see the starter app with two tabs: Home and Explore.

## Set Up Environment Variables

Create a new file named `.env` in the root of your project and add the following content:


```env
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
POSTHOG_PROJECT_TOKEN=
POSTHOG_HOST=https://us.i.posthog.com
```

Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp), [**PostHog**](https://jsm.dev/nativesub-posthog) .
Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp).

@coderabbitai coderabbitai Bot May 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix incorrect service reference in environment setup.

The text says "You can get these by signing up at: Expo" but the environment variable is EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY, which is a Clerk credential, not an Expo credential.

📝 Suggested fix 
-Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp).
+Replace the placeholder values with your real credentials. You can get these by signing up at: [**Clerk**](https://jsm.dev/nativesub-clerk).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp).
Replace the placeholder values with your real credentials. You can get these by signing up at: [**Clerk**](https://jsm.dev/nativesub-clerk).
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` at line 167, The README incorrectly directs users to "Expo" for
credentials while the env var is EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY (a Clerk
credential); update the text to reference Clerk instead of Expo and point the
signup/link to Clerk's signup or documentation (e.g., Clerk signup URL) so the
instruction matches the EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY variable name.


**Running the Project**

Expand Down
6 changes: 2 additions & 4 deletions app.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
const appJson = require('./app.json')
const appJson = require("./app.json");

export default {
expo: {
...appJson.expo,
extra: {
...(appJson.expo?.extra || {}),
posthogProjectToken: process.env.POSTHOG_PROJECT_TOKEN,
posthogHost: process.env.POSTHOG_HOST,
},
},
}
};
6 changes: 3 additions & 3 deletions app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"expo": {
"name": "react_native-recurrly",
"slug": "react_native-recurrly",
"name": "recurrly",
"slug": "recurrly",
Comment on lines +3 to +4

@coderabbitai coderabbitai Bot May 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for references to the old app name in configuration
rg -i 'react_native-recurrly' -g '!app.json' -C2

Repository: adrianhajdin/react-native-recurrly

Length of output: 586

Update package.json to match the app name change in app.json.

The app name was changed to recurrly in app.json, but package.json still references react_native-recurrly. This inconsistency can cause build and deployment issues in Expo projects. Update the name field in package.json to recurrly to maintain consistency across your build configuration. The package-lock.json will be regenerated automatically after this change.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app.json` around lines 3 - 4, package.json's "name" value is inconsistent
with app.json; open package.json and change the "name" field from
"react_native-recurrly" to "recurrly" so it matches app.json, search for any
other occurrences of the old name and update them, then run npm install (or
yarn) to regenerate package-lock.json and ensure the project builds with the
updated app name.

"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "reactnativerecurrly",
"scheme": "recurrly",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"ios": {
Expand Down
Loading