Skip to content
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.

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

feat: kratos nextjs with tailwindcss example #55

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

gopher1990
Copy link

@gopher1990 gopher1990 commented Sep 19, 2022

Related Issue or Design Document

Checklist

  • I have read the contributing guidelines
    and signed the CLA.
  • I have referenced an issue containing the design document if my change
    introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security
    vulnerability. If this pull request addresses a security vulnerability, I
    confirm that I got green light (please contact
    security@ory.sh) from the maintainers to push
    the changes.
  • I have added tests that prove my fix is effective or that my feature
    works.
  • I have added necessary documentation within the code base (if
    appropriate).

Further comments

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


vijesh deepan seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

@gopher1990
Copy link
Author

this is an example for kratos nextjs with tailwind css

@gopher1990 gopher1990 changed the title kratos nextjs with tailwindcss example docs kratos nextjs with tailwindcss example Sep 19, 2022
@gopher1990 gopher1990 changed the title docs kratos nextjs with tailwindcss example feat: kratos nextjs with tailwindcss example Sep 19, 2022
- id: github
provider: github
client_id: ... # Add the client ID
client_secret: ... # Add the client secret

Choose a reason for hiding this comment

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

You need to provide Client_secret that you got from google

providers:
- id: github
provider: github
client_id: ... # Add the client ID

Choose a reason for hiding this comment

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

And client ID

essential: true
family_name: null
hd: null # If you want the G Suite domain
password:

Choose a reason for hiding this comment

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

Why did you place password method here ?This should be on line 36

Copy link
Member

Choose a reason for hiding this comment

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

I agree would be better to have the password method first and then social

kratos-nextjs-tailwind/config/kratos.yml Show resolved Hide resolved
Copy link
Member

@vinckr vinckr left a comment

Choose a reason for hiding this comment

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

Thanks a lot for the contribution @gopher1990

I tried out the example and login/signup and recovery worked, awesome.

I have some ideas on how to improve the example:

  • use @ory/client instead of @ory/kratos-client (both work but the former will be the main SDK going forward
  • use https://playground.projects.oryapis.com/ as default kratos with optional instructions to run it using docker-compose
  • this would be nice to have, but some tests, like we have for the django example

Let me know if I can help with that!

@@ -0,0 +1,12 @@

# add the client id and client secret for google,github in kratos.yml file inside the config folder
Copy link
Member

Choose a reason for hiding this comment

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

Can you please use the README template from here:
https://raw.githubusercontent.com/ory/examples/master/_common/README.md

having an uniform README for all examples will help navigate the different examples :)

essential: true
family_name: null
hd: null # If you want the G Suite domain
password:
Copy link
Member

Choose a reason for hiding this comment

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

I agree would be better to have the password method first and then social

kratos-nextjs-tailwind/config/kratos.yml Show resolved Hide resolved
@vinckr
Copy link
Member

vinckr commented Oct 10, 2022

Hey @gopher1990
are you up to change the README to the template we use in this repo and address the comments on your PR?
It wont be much and then we can merge it 🤞 (we can add tests later on)

@gopher1990
Copy link
Author

gopher1990 commented Oct 10, 2022 via email

@vinckr
Copy link
Member

vinckr commented Jun 5, 2023

Hello @gopher1990
I am putting this in draft until we sort out the README.
I have no bandwidth at the moment to write one, but will see to help out when I get around to it.

@vinckr vinckr marked this pull request as draft June 5, 2023 09:26


const LoginPage = ({ flowData }: { flowData: SelfServiceLoginFlow }) => {
console.log(flowData);
Copy link
Collaborator

Choose a reason for hiding this comment

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

did you mean to leave this console log here?

import Link from "next/link";

const RecoveryPage = ({ flowData }: { flowData: SelfServiceRecoveryFlow }) => {
console.log(flowData);
Copy link
Collaborator

Choose a reason for hiding this comment

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

same

setLastName(flowData.identity.traits.name.last);
}, [flowData]);

console.log("flowData", flowData);
Copy link
Collaborator

Choose a reason for hiding this comment

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

same

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants