diff --git a/.env.local.sample b/.env.local.example similarity index 100% rename from .env.local.sample rename to .env.local.example diff --git a/README.md b/README.md index a65bf10..2885d22 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,88 @@ -This is a simple Clerk+Next.js application showing how you can run e2e Cypress tests for your application using testing tokens. +

+ + + + Clerk Logo for light background + + +
+

+
+

+ Clerk and Next.js App Router with Cypress E2E tests Quickstart +

+ + Downloads + + + Discord + + + Twitter + +
+
+ Clerk Hero Image +
-## Accompanying documentation -https://clerk.com/docs/testing/cypress +## Introduction -## Getting Started +Clerk is a developer-first authentication and user management solution. It provides pre-built React components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be dropped into any React or Next.js application. -1. Sign up for a Clerk account at https://clerk.com. -2. Go to Clerk's dashboard and create an application. -3. Set the required Clerk environment variables as shown in the [example env file](./env.local.sample). -4. `npm install` the required dependencies. -5. `npm run dev` to launch the development server. +After following the quickstart you'll have learned how to: -## Testing +- Install `@clerk/nextjs` +- Set your Clerk API keys +- Add Clerk's middleware +- Add `` and Clerk components +- Run E2E Cypress tests -1. Create a test account using [Clerk Dashboard](https://dashboard.clerk.com) or by signing up on the application. -2. Copy the `cypress.env.example.json` file to `cypress.env.json`. +## Deploy -```bash -cp cypress.env.example.json cypress.env.json -``` +Easily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard. + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fclerk%2Fclerk-nextjs-app-quickstart&env=NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,CLERK_SECRET_KEY&envDescription=Clerk%20API%20keys&envLink=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fnextjs&redirect-url=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fnextjs) -3. Set `test_user` and `test_password` to the credentials of the test account. -4. Open Cypress while keeps the development server running: +## Running the template ```bash -npm run cypress:open +git clone https://github.com/clerk/clerk-nextjs-app-quickstart ``` -5. Navigate through cypress and run the tests -e2e testing -> chrome -> start e2e testing in chrome +To run the example locally, you need to: + +1. Sign up for a Clerk account at [https://clerk.com](https://dashboard.clerk.com/sign-up?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-nextjs-app-quickstart). +1. Go to the [Clerk dashboard](https://dashboard.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-nextjs-app-quickstart) and create an application. +1. Set the required Clerk environment variables as shown in [the example `env.local.example` file](./.env.local.example). +1. `npm install` the required dependencies. +1. `npm run dev` to launch the development server. + +## Testing + +1. See the `testing-tokens.cy.ts` file for Cypress E2E tests. +1. Set the `test_user` and `test_password` to the credentials of the test account shown in [the example `.cypress.env.json.example` file](./cypress.env.json.example). +1. `npm run cypress:open` to launch the development server. This will open the Cypress window, which must remain open throughout testing. +1. In Cypress, choose your preferred browser to test. A new browser window should open. +1. From `Specs`, select a test to run it. + +If you aren't running your app on `localhost:3000`, update the `baseUrl` in `cypress.config.ts` to match your development server's URL. + +## Learn more + +To learn more about Clerk and Next.js, check out the following resources: + +- [Quickstart: Get started with Next.js and Clerk](https://clerk.com/docs/quickstarts/nextjs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-cypress-nextjs) +- [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-cypress-nextjs) +- [Next.js Documentation](https://nextjs.org/docs) +- [Testing with Cypress](https://clerk.com/docs/testing/cypress?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-cypress-nextjs) +- [Cypress Documentation](https://docs.cypress.io/app/get-started/why-cypress) + +## Found an issue or want to leave feedback + +Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel. + +## Connect with us + +You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A). -**If you are running NOT running on `localhost:3000`**, you will need to update the `baseUrl` in `cypress.config.ts` to match your development server's URL. \ No newline at end of file +If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us! diff --git a/cypress.env.sample.json b/cypress.env.json.example similarity index 100% rename from cypress.env.sample.json rename to cypress.env.json.example diff --git a/cypress/e2e/testing-tokens.cy.ts b/cypress/e2e/testing-tokens.cy.ts index 7a710b5..cccd5bd 100644 --- a/cypress/e2e/testing-tokens.cy.ts +++ b/cypress/e2e/testing-tokens.cy.ts @@ -9,25 +9,22 @@ describe("Testing Tokens", () => { it("sign in", () => { setupClerkTestingToken(); - cy.visit('/protected'); + cy.visit("/protected"); - cy.contains('h1', 'Sign in'); - cy.get('.cl-signIn-root').should('exist'); - cy.get('input[name=identifier]').type(Cypress.env('test_user')); + cy.contains("h1", "Sign in"); + cy.get(".cl-signIn-root").should("exist"); + cy.get("input[name=identifier]").type(Cypress.env("test_user")); - cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click(); - cy.get('input[name=password]').type(Cypress.env('test_password')); + cy.get(".cl-formButtonPrimary").contains("button", "Continue").click(); + cy.get("input[name=password]").type(Cypress.env("test_password")); + cy.get(".cl-formButtonPrimary").contains("button", "Continue").click(); - cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click(); - - - cy.url().should('include', '/protected'); - cy.contains('h1', 'This is a PROTECTED page'); - - cy.visit('/'); - cy.contains('signed-in'); + cy.url().should("include", "/protected"); + cy.contains("h1", "This is a PROTECTED page"); + cy.visit("/"); + cy.contains("signed-in"); }); // Account Portal example @@ -40,11 +37,10 @@ describe("Testing Tokens", () => { // cy.contains('h1', 'Sign in'); // cy.get('.cl-signIn-root').should('exist'); // cy.get('input[name=identifier]').type(Cypress.env('test_user')); - + // cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click(); // cy.get('input[name=password]').type(Cypress.env('test_password')); - - + // cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click(); // }); @@ -55,35 +51,35 @@ describe("Testing Tokens", () => { it("sign in and sign out with custom command", () => { cy.visit(`/`); - cy.clerkSignIn({ - strategy: 'password', - identifier: Cypress.env('test_user'), - password: Cypress.env('test_password') + cy.clerkSignIn({ + strategy: "password", + identifier: Cypress.env("test_user"), + password: Cypress.env("test_password"), }); - cy.visit('/protected'); - cy.contains('h1', 'This is a PROTECTED page'); - cy.visit('/'); + cy.visit("/protected"); + cy.contains("h1", "This is a PROTECTED page"); + cy.visit("/"); cy.clerkSignOut(); - cy.visit('/protected'); - cy.get('.cl-signIn-root').should('exist'); - cy.visit('/'); - cy.contains('p', 'signed-out'); + cy.visit("/protected"); + cy.get(".cl-signIn-root").should("exist"); + cy.visit("/"); + cy.contains("p", "signed-out"); }); it("sign up", () => { setupClerkTestingToken(); - cy.visit('/sign-up'); - cy.contains('h1', 'Sign Up'); - cy.get('.cl-signUp-root').should('exist'); - cy.get('input[name=username]').type('e2euser' + new Date().getTime()); + cy.visit("/sign-up"); + cy.contains("h1", "Sign Up"); + cy.get(".cl-signUp-root").should("exist"); + cy.get("input[name=username]").type("e2euser" + new Date().getTime()); - cy.get('input[name=password]').type(Cypress.env('test_password')); + cy.get("input[name=password]").type(Cypress.env("test_password")); - cy.get('.cl-formButtonPrimary').contains('button', 'Continue').click(); + cy.get(".cl-formButtonPrimary").contains("button", "Continue").click(); - cy.visit('/protected'); - cy.url().should('include', '/protected'); + cy.visit("/protected"); + cy.url().should("include", "/protected"); }); });